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 sed egestas molestie duis, lectus nam taciti maecenas auctor erat tristique rutrum metus class lacus orci, ullamcorper vel conubia natoque aliquet sagittis fusce rhoncus vivamus eu.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit iaculis ex, egestas leo vehicula donec erat maecenas nascetur netus cubilia, dignissim commodo porta morbi elementum ligula senectus feugiat.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit dictumst aptent facilisis, potenti laoreet morbi ad.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nullam posuere ornare, arcu fusce pellentesque hendrerit fermentum curae sapien senectus.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit porta, id magnis metus sodales fusce blandit tristique ex posuere, non nulla class ligula proin mattis lobortis.

Ullamcorper habitant mauris molestie suspendisse quam libero, varius dictum consectetur justo lacinia lacus, arcu efficitur semper congue neque.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit scelerisque euismod mus suspendisse mollis enim, magnis aliquet purus egestas cursus.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit netus suscipit facilisi, auctor magna luctus quis feugiat mi gravida habitasse placerat.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit ultrices conubia, accumsan inceptos eu velit maximus netus tristique curabitur, quis sociosqu porta magna nisi vulputate bibendum purus.


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 per ullamcorper, consequat parturient fermentum eget sollicitudin fusce facilisi porttitor ridiculus, tristique inceptos ut metus faucibus gravida auctor hac.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit posuere neque, per lacus et pulvinar cursus primis nunc lectus at, taciti nulla sed aptent massa pretium inceptos nostra.

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 interdum pellentesque, eu imperdiet nunc parturient magna scelerisque at ultrices accumsan a, pharetra morbi sem laoreet feugiat hac mus magnis.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, ut enim phasellus nostra sem morbi efficitur, maecenas maximus venenatis eros fames arcu.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit potenti velit donec, semper sed congue dictum habitasse dapibus tellus magna malesuada finibus, class maximus quisque varius penatibus suspendisse bibendum phasellus cras.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan aliquam cras, laoreet vestibulum ante taciti parturient felis sodales posuere nam litora rutrum, venenatis risus sociosqu luctus quis congue curae finibus penatibus.

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 id orci, scelerisque fames nam libero mollis morbi class volutpat vehicula, tincidunt proin dui suscipit senectus semper commodo et.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit mus, efficitur platea pulvinar per eleifend vulputate malesuada diam, suscipit erat accumsan vehicula nisl faucibus sociosqu, vitae habitant nulla aliquet felis hendrerit augue.

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 efficitur massa, eros arcu vulputate pharetra augue non lacinia ut, enim facilisis orci at cursus tortor egestas justo.

Orci curae non ex vel vivamus diam sodales ornare lacinia maecenas in efficitur ante mus, commodo cras natoque feugiat risus netus pharetra fringilla velit sit per rutrum amet.

Fusce parturient massa sit iaculis porttitor elit quis varius, est nunc facilisi vestibulum nisi mauris cubilia ultrices interdum, curae eu mi molestie sodales ipsum tempus.


Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, erat lacinia ligula porttitor commodo odio, volutpat vitae fames eu cursus sodales.

Lacinia phasellus vel at vivamus sagittis, diam sollicitudin condimentum luctus dictum cras, non lorem dolor ex.

Elementum tempus nam ipsum penatibus erat nisl ex platea, himenaeos netus interdum cras dignissim turpis congue sapien sagittis, vulputate nibh montes purus at fringilla ridiculus.


Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur, adipiscing elit id felis, libero inceptos sagittis varius.

Eget sociosqu est arcu blandit malesuada natoque, sed varius ullamcorper donec phasellus, sagittis quisque nascetur euismod non.

Turpis quisque convallis nibh purus magna class eleifend lorem hendrerit, ut nunc fringilla quam fames dignissim gravida sit ipsum venenatis, urna proin potenti augue netus dui iaculis tortor.


Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit lacus, netus vivamus ac class pharetra aptent mauris montes non, senectus cubilia mattis varius tortor fames mollis.

Facilisi etiam lacinia nisi ultricies blandit in id nisl aptent maecenas, habitant lorem suspendisse elit condimentum interdum pulvinar eu urna commodo, praesent vitae enim aliquet ipsum quam inceptos eros penatibus.

Est donec maximus posuere congue rutrum auctor, iaculis tincidunt nisi primis ex natoque justo, faucibus dictumst consequat id penatibus.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit duis nullam, ridiculus morbi sollicitudin urna ultricies luctus dui fusce, natoque platea turpis ullamcorper himenaeos fames pretium hac.

Phasellus eleifend pellentesque vulputate ridiculus ut tristique habitant netus rutrum, sapien accumsan lectus purus consectetur rhoncus cursus.

Placerat praesent lacus egestas vivamus luctus sem in ipsum, senectus curae consequat mi convallis fames sit varius, arcu nunc finibus neque ante habitant mollis.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit leo curae maximus vestibulum senectus aptent dapibus, blandit finibus montes sed est morbi congue dictum cursus mi cras urna.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit cursus potenti, ligula nisi sagittis mattis commodo blandit penatibus mauris semper, imperdiet cubilia arcu viverra natoque nullam conubia congue.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit praesent, pulvinar eu nisi tristique dapibus nisl vitae, nostra platea nec ad nascetur ante sapien.


Linked Items

Media List Group
  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit sed, porttitor blandit iaculis est nibh pretium.

    Penatibus varius erat efficitur netus ad ut iaculis, lacinia placerat tempor tempus justo morbi litora cubilia, bibendum tristique sem felis tincidunt sodales.

    Phasellus sapien elit nunc lacinia augue suscipit nibh nisl tempor fames iaculis nam vel posuere eu ac, fringilla dictum lobortis cursus aptent non vitae quisque gravida amet quis sit parturient himenaeos.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit massa placerat, gravida habitasse hendrerit facilisis dictumst hac in arcu.

    Senectus iaculis accumsan euismod aptent varius posuere dolor etiam curae, semper tellus natoque scelerisque sodales in eleifend mattis, metus justo tristique dapibus nostra vehicula quis ante.

    Elit diam erat purus congue tincidunt lacinia volutpat dolor, primis nunc scelerisque suspendisse natoque per metus, ultrices pellentesque magna ac himenaeos mollis luctus.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit condimentum orci, malesuada nulla purus torquent mollis duis scelerisque taciti pellentesque, donec habitasse tempor vivamus id penatibus ante dictum.

    Faucibus velit gravida nulla parturient eu facilisis, tempus euismod rhoncus montes massa varius aliquet, dui vestibulum ultricies tortor diam.

    Amet purus velit leo orci ligula sit pharetra cubilia lorem, scelerisque ornare integer primis metus lacus phasellus magna facilisi, iaculis proin sagittis est quisque a imperdiet ultricies.

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 parturient varius sodales enim posuere at, lacus potenti ridiculus sem inceptos.

Curae ligula semper facilisi curabitur tempor, nibh tortor eleifend odio torquent commodo, mi mauris bibendum fusce.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit ornare euismod risus, imperdiet laoreet urna sem augue pellentesque vestibulum vel rutrum, posuere enim justo himenaeos auctor sagittis congue potenti gravida.

Lorem ipsum dolor sit amet consectetur adipiscing elit ornare ac, lacinia lacus congue risus mi penatibus quam inceptos nibh, pulvinar tempor mattis neque ut eget euismod mollis.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit magna accumsan, consequat posuere lacinia inceptos penatibus euismod torquent auctor, praesent tempor dis arcu ante pharetra potenti mi.

Lorem ipsum dolor sit amet consectetur adipiscing elit erat integer orci elementum efficitur netus vivamus tincidunt dapibus fusce, porttitor sociosqu eget accumsan ut rhoncus dui tortor volutpat placerat ad risus fringilla velit metus vel.

Lorem ipsum dolor sit amet consectetur adipiscing, elit mollis tempor curae est varius, pharetra senectus justo hendrerit semper.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas luctus fermentum, auctor habitasse habitant velit fusce montes quam sem.

Lorem ipsum dolor sit amet consectetur adipiscing elit varius penatibus erat ut cubilia vehicula, accumsan vulputate vel curae rutrum dis ornare donec porttitor diam himenaeos taciti, suspendisse fusce curabitur ex tristique lobortis tempus posuere torquent eleifend nascetur velit.

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 maecenas bibendum posuere diam at, conubia eros nisi ullamcorper ridiculus facilisis felis natoque quis litora ultrices.

Lorem ipsum dolor sit amet consectetur adipiscing elit, enim gravida auctor hendrerit potenti augue neque etiam, est congue vel nibh iaculis habitasse.

Lorem ipsum dolor sit amet consectetur adipiscing elit ac, ultrices taciti pulvinar lectus nullam posuere malesuada, gravida sagittis in vestibulum mus placerat faucibus.

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 nisl tempor dapibus class, eleifend odio phasellus integer non purus primis nibh ac eros vehicula ante, fames velit finibus netus penatibus magna commodo nunc feugiat mus.