Testing inline Locker

Rows and Columns

3 same size columns on medium and larger screens
Column 1 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit parturient, dis porttitor dapibus viverra sem ac eget facilisi quisque, orci facilisis convallis nec mattis bibendum semper.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit mattis eget, arcu ligula mi dignissim.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit luctus, per lobortis tempus himenaeos eros aptent justo nulla, vestibulum penatibus tortor congue volutpat scelerisque maximus.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, eleifend montes nullam felis euismod elementum ornare magna, scelerisque mattis accumsan sem inceptos ut.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit magnis sapien quis tempor, suspendisse torquent orci conubia vestibulum enim litora at nostra eu.

Imperdiet nibh curabitur nascetur nullam venenatis iaculis fringilla urna, cursus pellentesque dictum eleifend accumsan purus ridiculus.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit finibus, magna volutpat morbi posuere ut a rhoncus aliquam, nascetur aliquet placerat mattis facilisis scelerisque mi.


2 columns with an offset in between
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit cursus parturient odio, volutpat habitasse mattis interdum.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit cras, posuere tortor velit in augue quam tellus magnis, curabitur elementum maximus nam finibus aliquet vivamus.


Nested Rows and Columns
Col 1
Col 1.1
Col 1.2
Col 2
Col 2.1
Col 2.2
Col 3
Col 3.1
Col 3.2

Responsive Embed

Embedded Video

No real video

Responsive Utilities

Show text depending on screen size

Sample 1: This text disappears on small and extra small screens.

Lorem ipsum dolor sit amet consectetur adipiscing elit rutrum, duis placerat ullamcorper curabitur ut pretium hac fermentum gravida, porta tempor accumsan dui inceptos vel tincidunt.

Sample 2: This text will not be shown on large and extra large screens.

Lorem ipsum dolor sit amet consectetur adipiscing elit est feugiat tristique etiam phasellus ante malesuada class, sed ligula platea cursus accumsan urna nunc cras curae quam himenaeos consequat interdum.

Cards

Simple card with a body element
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Kitchen Sink
​​​

Card Title

Some quick example text to build on the card title and make up the bulk of the card’s content.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Lorem Ipsup Dolor Sit

Simple card with image cap

Card Title

Lorem ipsum dolor sit.

Simple card with image overlay

Card Title

Lorem ipsum dolor sit.

Card with header and footer
Example Header

Card Title

Lorem ipsum dolor sit.

Card group

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Card deck

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Card columns

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Card Title

Euismod cubilia mattis sed habitasse.

Card Title

Arcu porta aptent lacus.

Card Title

Quisque est eget.

Card Title

Imperdiet dapibus ridiculus.

Card Title

Eros mi mauris ultricies.

Card Title

Nascetur commodo imperdiet.

Cards with shadows

No Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit dictum, aliquam commodo rutrum augue nec hac aliquet natoque, finibus molestie sed pulvinar fames lacus venenatis.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, nostra eleifend habitasse sodales sed.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla proin metus, est pharetra dis vestibulum nisi taciti etiam neque eros turpis, integer odio hac mus vivamus ornare leo volutpat sem.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit elementum, hendrerit libero curae sem pellentesque vehicula bibendum tincidunt orci, condimentum fermentum ad dui laoreet feugiat taciti.

Icons

Free Icons
  • Facebook
  • Arrow Lft
  • Arrow Right
  • Arrow Up
  • Arrow Down
  • Folder Open
  • Cloud
  • Coffee
  • Car
  • File
  • Bars
  • Thumbs Up

Stacked Icons
​​​

Buttons

Standard buttons
Hyperlink

Outlined buttons
Hyperlink

Button size

Active buttons

Disabled buttons

Block level buttons

Button Groups

Basic example

Button Toolbar

Dropdowns

Single Button Dropdown

Split Button Dropdown

Drop Variations

Navs

Simple Navigation Links

Navigation Link and Dropdown with Pills

Navigation Link and Dropdown with Tabs

Collapsible Navigation Bar

Vertical Navigation Bar

Breadcrumb

Breadcrumb style links

Badge

Badge styles
New Messages 9 ​New Messages 9 ​New Messages 9

Jumbotron

Normal Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu class vitae dignissim faucibus ridiculus luctus purus, velit nisi nulla vehicula massa per.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit, suscipit taciti tellus ligula senectus lobortis, imperdiet magna eleifend blandit volutpat nisi.

Alerts

Alerts

Dismissible Alerts

Dismissible Alerts with Fade Effect

Progress Bar

Progress Bar Styles
Simple
50%
Striped
50%
Striped and Animated
50%
Stacked
50%
25%
5%
Stacked and Labeled
50%
25%
5%

Media Object

Top Aligned Media
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit vel sodales, neque leo fames urna id semper arcu rhoncus.

Facilisi et non maecenas augue massa per efficitur mus magna suscipit, dui sollicitudin malesuada congue cursus porta semper eget netus, fusce integer scelerisque tincidunt suspendisse interdum fames ac amet.

Sodales mattis tempor euismod parturient platea tincidunt turpis duis, metus sociosqu sed neque mauris dictum consequat pretium, scelerisque aliquam eget hendrerit elit nam primis.


Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit sodales sed, nibh volutpat tincidunt dapibus lobortis hendrerit blandit.

Nostra at libero finibus vulputate aenean imperdiet ornare sollicitudin curabitur, laoreet odio hac sociosqu auctor maecenas vivamus netus, potenti suscipit a condimentum ut quis ultricies maximus.

Laoreet volutpat sociosqu non montes tortor lacus magna, quisque sagittis rhoncus vestibulum elit ultrices eleifend, interdum ligula luctus aptent sit lacinia.


Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, elementum praesent scelerisque erat gravida at class, pharetra dapibus interdum mi proin primis.

Vel ridiculus facilisis vulputate adipiscing varius nibh congue mauris torquent, morbi lacinia interdum dapibus himenaeos ante aliquam volutpat penatibus, vehicula mollis dictum a sed facilisi iaculis semper.

Accumsan habitasse adipiscing libero ac varius elit class id magnis inceptos, nibh neque rhoncus volutpat fringilla lobortis potenti vulputate suscipit.


Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse, condimentum nibh aenean velit habitant quisque neque nec tincidunt, odio iaculis pellentesque potenti lectus suscipit sollicitudin.

Maximus mi leo natoque mauris luctus neque interdum, himenaeos sociosqu ridiculus tristique egestas curabitur, ad turpis vitae nibh ullamcorper nulla.

Quam dis eleifend fringilla feugiat lorem diam semper lobortis potenti, tortor massa posuere hac morbi etiam consequat mi.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit morbi cubilia nisl, mattis felis tincidunt integer feugiat cursus mi dignissim ultrices, sem habitasse laoreet litora magna id ornare neque arcu.

Interdum nascetur sit sapien nunc tellus eleifend pharetra iaculis dis aliquam, vestibulum feugiat lorem convallis ad egestas rhoncus tortor neque elementum, nulla pretium tempor etiam faucibus suspendisse magna vitae viverra.

Tincidunt quam nisi laoreet massa ante velit mus placerat elit nascetur, a enim sem senectus pretium himenaeos lobortis vehicula risus augue, iaculis in euismod hendrerit parturient diam proin et natoque.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit mus libero montes sagittis dui sociosqu venenatis, donec primis sapien urna massa tincidunt blandit odio auctor dapibus ac magnis nulla, metus tellus eget per porta cras quis lobortis tortor imperdiet ut duis ultricies.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit rhoncus litora aliquam netus sociosqu in, vestibulum ultricies nunc massa nec velit nostra vulputate imperdiet torquent conubia justo.

  • Lorem ipsum dolor sit amet consectetur adipiscing, elit faucibus primis litora fames varius tempus, mattis sapien lectus diam accumsan.


Linked Items

Media List Group
  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit conubia curae a, posuere taciti lectus in ad tortor vulputate cursus potenti commodo, est ante laoreet sed himenaeos mollis eget ac tempor.

    Justo praesent phasellus aptent mauris ligula sodales tempus sociosqu dictumst convallis ornare, mus sit bibendum ipsum lectus id sollicitudin porttitor libero eros pretium, vehicula aliquam aenean eget ultrices odio facilisi dictum imperdiet quis.

    Velit molestie nisl dolor nec dictumst cras consequat dapibus curabitur lectus, habitant ex ridiculus donec tempor blandit duis feugiat mattis dignissim, dis turpis venenatis rhoncus varius vivamus curae massa platea.

  • Header 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit molestie, ac taciti quisque.

    Lorem mus class nibh nisl penatibus habitasse, sem gravida senectus eget felis rutrum pellentesque, ac ornare lacus metus fusce.

    Erat rutrum amet est aliquam viverra ultricies proin conubia quis, pulvinar augue velit laoreet fames inceptos eleifend lectus blandit magna, sagittis quam ipsum netus senectus elit convallis etiam.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit primis torquent aliquam, bibendum ultricies ligula metus dapibus morbi a dictum fermentum auctor, rhoncus risus mollis platea fusce sagittis cursus accumsan mauris.

    Senectus diam pharetra turpis torquent efficitur ultrices litora ut, vitae erat ullamcorper facilisis sagittis maecenas commodo cubilia a, mollis dignissim at habitasse sem consectetur ex.

    Parturient primis fusce eget lectus tortor pharetra fames aliquet iaculis, auctor vitae torquent per nascetur placerat gravida sem lorem, natoque viverra litora himenaeos dictumst mus vehicula luctus.

Code

Code Snippet
<h4 id="-modal-footer-parameters">modal-footer parameters</h4><table><thead><tr><th>Parameter</th><th>Description</th><th>Required</th><th>Values</th>q<th>Default</th></tr></thead><tbody><tr><td>class</td><td>Any extra classes you want to add</td><td>optional</td><td>any text</td><td>none</td></tr><tr><td>data</td><td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td><td>optional</td><td>any text</td><td>none</td></tr></tbody></table>

Scrollable Code Snippet
<h4 id="-modal-footer-parameters">modal-footer parameters</h4><table><thead><tr><th>Parameter</th><th>Description</th><th>Required</th><th>Values</th>q<th>Default</th></tr></thead><tbody><tr><td>class</td><td>Any extra classes you want to add</td><td>optional</td><td>any text</td><td>none</td></tr><tr><td>data</td><td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td><td>optional</td><td>any text</td><td>none</td></tr></tbody></table>

Inline Code

Use the media flag at the list-group tag and the listgroup flag at the media tag.


Tables

Header 1 Header 2 Header 3
A 1 5%
B 2 10%
C 3 15%
D 4 20%
E 5 25%
F 6 30%
G 7 35%
H 8 40%
I 9 45%
J 10 50%
K 11 55%
Total

Images

Images
Generated Dummy Image 38

Figures

Image with Text above
A caption for the below image.
Generated Dummy Image 39
A caption for the below image.
Generated Dummy Image 40

Image with Text below
Generated Dummy Image 41
A caption for the above image.
Generated Dummy Image 42
A caption for the above image.

Blockquote

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing, elit aliquet rutrum ullamcorper tortor convallis class, hac facilisis lobortis dui diam.

Senectus pulvinar per integer proin aenean dictumst donec mauris tellus, nunc augue condimentum et class cursus nibh venenatis, quisque vel torquent felis leo himenaeos magna lectus.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit laoreet aptent, hendrerit etiam interdum risus facilisis a ultrices porttitor metus, molestie mattis felis condimentum id hac tristique semper.

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti maecenas consequat, morbi odio inceptos ligula magna aliquam integer dictumst congue, rhoncus dui nostra turpis quis diam cras ante per.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit parturient, porta sociosqu sem maximus primis odio torquent pretium, eleifend iaculis nec taciti curabitur elementum sollicitudin.

Lorem ipsum dolor sit amet consectetur adipiscing, elit nascetur praesent vehicula viverra platea, fermentum facilisi dictum hac nam.

Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque nascetur, sociosqu proin at magna lacus nec hac fusce, nullam nibh aliquet efficitur imperdiet congue lobortis sollicitudin.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur, facilisis molestie neque viverra posuere leo convallis at rutrum, velit est elementum hendrerit bibendum vestibulum libero.

Lorem ipsum dolor sit amet consectetur adipiscing elit, himenaeos nulla sociosqu nostra elementum commodo efficitur, ligula potenti suspendisse massa aliquam tellus.

Flex

Flex Row

Flex Reverse Row

Inline Flex

Inline Reverse Row Flex

Flex Column

Flex Reverse Column

Flex Justify Center

Flex Align Items Center

Flex Item Self-Align

Flex Wrap

No Wrap

Wrap

Reverse Wrap


Flex Row Fill

Flex Grow

Flex Shrink

Flex No Shrink

Tooltip

Tooltip Examples

Popover

popover Examples

Accordion

Basic Accordion

Lorem ipsum dolor sit amet consectetur adipiscing elit, interdum lacinia ex gravida posuere blandit, nisi parturient dapibus aliquam hendrerit placerat.

Lorem ipsum dolor sit amet consectetur adipiscing elit habitant condimentum, tempor aliquet purus leo sollicitudin sodales efficitur blandit, conubia gravida ex euismod feugiat et suspendisse magna.

Lorem ipsum dolor sit amet consectetur adipiscing elit pretium sodales suscipit per, inceptos a euismod eget accumsan sed phasellus posuere quis sapien.

Carousel

Carousel with text

Standard Carousel

Customized Carousel

Modal

Standard Modal Examples
Centered Small Modal Examples

Float and Clearfix

Float and Clearfix Examples
No Float
Left Float
Left Float
Right Float
No Float
Right Float
Float Left
Generated Dummy Image 51
Generated Dummy Image 52 Generated Dummy Image 53

Wrapper

Wrapper Example (set color for icon and text)

Lorem ipsum dolor sit amet consectetur adipiscing elit eget, habitant egestas lobortis libero at magna natoque euismod, finibus faucibus facilisi a congue consequat dictum, phasellus odio facilisis maximus dictumst duis fames.