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, vulputate facilisis massa curabitur venenatis urna iaculis, quam conubia eros orci eget mollis.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit mi posuere pharetra tempus, nascetur convallis ultricies dui in scelerisque ligula mollis maecenas nisi.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit viverra dictumst commodo congue, potenti iaculis at maecenas dictum vivamus himenaeos venenatis praesent facilisis habitasse, lacinia libero pulvinar id hac risus lobortis torquent nisl aenean.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit hac fringilla sagittis, ut penatibus tortor porttitor maximus eleifend litora metus.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit orci in blandit sed lectus platea, cursus ornare pellentesque curae sociosqu justo augue tempus vivamus sapien maecenas.

Penatibus donec curabitur augue ligula habitant arcu montes sodales aliquet, mus tristique nisl semper non dui vulputate fames luctus mattis, lobortis class malesuada scelerisque elit senectus maecenas varius.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit primis senectus sem quis, viverra himenaeos blandit velit nostra quisque inceptos etiam mattis ut, netus nisi habitasse commodo vel nulla elementum urna lacinia libero.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit congue integer, torquent quisque suspendisse mi euismod quis placerat malesuada sociosqu, curae pretium lobortis nostra fringilla ridiculus varius dignissim.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit venenatis aliquet, lacinia molestie proin eleifend nec maximus cubilia.


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 lectus non magnis aliquet dictum, iaculis rhoncus potenti duis ex varius platea massa justo parturient.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit, nisl dui a auctor nec semper, mollis pulvinar cras nibh aptent eu.

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 donec cras, dictumst nec taciti rutrum tincidunt ullamcorper fames in, mattis montes per scelerisque maximus auctor felis sollicitudin.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit senectus habitasse, praesent dictumst suscipit rhoncus vulputate sem placerat ultricies vitae arcu, elementum ultrices pellentesque efficitur nec mus mollis porttitor.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit vivamus sagittis aliquam, magnis leo natoque laoreet turpis cras phasellus dis platea metus ultrices, aptent sodales felis porta lacinia pharetra sapien donec proin.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit cubilia enim posuere rhoncus fusce, facilisi felis iaculis venenatis donec.

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 convallis quisque et aliquet, morbi tortor vitae eleifend ut.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit efficitur porta, morbi curabitur hac mauris facilisi ex a natoque, ad cras habitant id fermentum aptent purus vulputate.

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 massa, placerat aptent parturient maximus nulla imperdiet commodo hac, taciti risus inceptos pulvinar eget orci ornare.

Massa eget eros condimentum nam augue pretium penatibus pharetra dolor amet leo, ut finibus dignissim blandit a tempor ultricies scelerisque nulla egestas.

Proin lobortis efficitur porta integer arcu primis purus maximus, tellus auctor mollis lectus senectus pretium nisi commodo, gravida viverra sem semper ipsum aptent metus.


Center Aligned
Header

Lorem ipsum dolor sit amet consectetur, adipiscing elit tristique facilisi interdum laoreet, massa maecenas ex proin.

Sollicitudin justo augue sodales felis etiam placerat maecenas finibus taciti, praesent gravida penatibus lectus egestas curae iaculis rutrum.

Ultrices eget viverra nibh cursus maecenas euismod montes taciti ex interdum posuere egestas, amet malesuada natoque eu in netus diam aenean nisl ligula mauris.


Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit dapibus mi, orci cubilia elementum dignissim vestibulum aptent tempor cras, a fringilla vel senectus finibus himenaeos inceptos sagittis.

Cras sit etiam blandit leo vehicula consequat, dictumst dolor conubia iaculis aenean lectus consectetur, pretium donec magna pharetra ultricies.

Morbi mauris ac etiam ullamcorper eu donec class augue, ut sociosqu convallis porta nostra interdum molestie, cursus massa curabitur iaculis suscipit justo pellentesque.


Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, conubia aliquam potenti ultrices tristique enim bibendum, efficitur commodo diam in proin at.

Nisi porttitor sollicitudin mollis magnis, commodo placerat suspendisse imperdiet, cras ultrices eleifend.

Hendrerit vulputate erat sed commodo semper aenean, ut faucibus praesent fermentum pulvinar feugiat, urna et nascetur nullam ornare.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla enim magnis consequat velit morbi fermentum, placerat sem a ornare scelerisque dictumst.

Nulla integer ante sapien semper velit phasellus dictum nam, arcu porttitor interdum massa ad mattis dignissim laoreet, risus ut lacus pulvinar sem donec aliquet.

Ultrices tempor gravida aliquet accumsan non mus vitae sapien, libero arcu a hac nulla ullamcorper primis duis dolor, laoreet taciti aptent tempus himenaeos curabitur amet.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing, elit conubia velit sed vel, et sodales phasellus bibendum pretium.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit magnis interdum, sociosqu sodales himenaeos dapibus dis nascetur facilisi.

  • Lorem ipsum dolor sit amet consectetur adipiscing, elit quam malesuada blandit vel leo, per tortor dignissim penatibus volutpat.


Linked Items

Media List Group
  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia gravida dapibus, pellentesque nunc hendrerit scelerisque accumsan platea vel sollicitudin per quis quisque, sagittis sociosqu fermentum tincidunt nascetur porta interdum nulla a.

    Tempus himenaeos montes malesuada eu eget faucibus interdum orci mauris enim hac, sed facilisis senectus in primis aliquam velit nisl vel.

    Lectus etiam amet montes mus molestie cras orci, elit bibendum litora sagittis odio viverra hac feugiat, vehicula interdum purus porta nulla condimentum.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit at erat, porttitor per maximus ac ultrices litora facilisis accumsan egestas, varius sodales mauris lacus orci dignissim mi eleifend.

    Ac sapien adipiscing dui convallis tincidunt odio praesent parturient dignissim cursus, auctor dolor massa morbi faucibus magna eget hendrerit sociosqu.

    Per penatibus tincidunt erat urna nec at aliquam fusce, vivamus nam duis iaculis vel sed proin lectus ut, praesent consequat rhoncus accumsan nascetur facilisi orci.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, risus feugiat imperdiet etiam penatibus rhoncus cras, porta neque natoque elementum potenti dignissim porttitor.

    Neque potenti commodo ultricies facilisi praesent conubia nostra fusce ullamcorper, montes quis class mi dolor suspendisse curabitur taciti mus faucibus, cursus justo rutrum primis est amet et mattis.

    Finibus faucibus augue porta nunc dui ligula hendrerit convallis, turpis eleifend porttitor phasellus tortor risus praesent, elementum ac maecenas efficitur himenaeos neque erat.

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 3

Figures

Image with Text above
A caption for the below image.
Generated Dummy Image 4
A caption for the below image.
Generated Dummy Image 5

Image with Text below
Generated Dummy Image 6
A caption for the above image.
Generated Dummy Image 7
A caption for the above image.

Blockquote

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing elit laoreet, pulvinar gravida hendrerit eu parturient a placerat condimentum diam, orci ultrices habitasse aliquam ridiculus quam tristique.

Enim sed ridiculus nisi quis penatibus efficitur consequat quisque, fermentum vel vestibulum ac fringilla etiam maecenas elit lacinia, aliquet commodo ad phasellus erat facilisis magnis.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit tincidunt vel class elementum nisl venenatis, eu morbi est etiam feugiat aptent finibus nunc nisi suscipit proin.

Lorem ipsum dolor sit amet consectetur adipiscing elit efficitur semper euismod fames, auctor conubia felis rhoncus luctus turpis velit justo arcu nec, nostra nascetur dignissim id aliquam sapien praesent accumsan ultrices quam.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit auctor, magnis dictumst viverra vulputate velit sapien fermentum sagittis, dignissim nulla efficitur suspendisse venenatis aenean consequat.

Lorem ipsum dolor sit amet consectetur adipiscing elit euismod, et nulla felis velit pellentesque penatibus convallis, pulvinar a duis facilisis augue arcu cras.

Lorem ipsum dolor sit amet consectetur adipiscing elit, pharetra aptent ligula mattis quisque eleifend venenatis suscipit, eros natoque vitae ridiculus conubia hac.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, pulvinar viverra ultrices netus semper nisl pretium, vivamus tortor cursus praesent mauris vel orci.

Lorem ipsum dolor sit amet consectetur adipiscing elit senectus suscipit mattis aenean lobortis, at sociosqu enim duis et urna convallis mollis nam felis.

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 gravida, hendrerit aliquam tincidunt curabitur tempus id augue, potenti tellus consequat montes euismod rhoncus in.

Lorem ipsum dolor sit amet consectetur adipiscing elit mollis, arcu non urna vitae pellentesque purus viverra senectus, hendrerit vel metus etiam magna fringilla quam.

Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan, sollicitudin ut nulla donec netus ridiculus commodo etiam, per finibus habitant gravida luctus posuere class.

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 16
Generated Dummy Image 17 Generated Dummy Image 18

Wrapper

Wrapper Example (set color for icon and text)

Lorem ipsum dolor sit amet consectetur adipiscing elit condimentum commodo nulla vel, ante fringilla sollicitudin integer consequat ultrices tempor neque est taciti.