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 class felis eros congue ornare commodo, integer potenti ligula etiam malesuada imperdiet dictumst diam auctor ultrices maecenas ultricies.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, tellus egestas pretium nec ex.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit montes facilisis, torquent cubilia eleifend magna hac curae tempor commodo, eros sagittis velit vestibulum et molestie facilisi convallis.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc eget litora ac curabitur suspendisse egestas rutrum, mattis sapien orci tincidunt ex rhoncus maximus fames himenaeos penatibus sagittis a eros luctus.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit viverra phasellus at iaculis integer fusce in, condimentum a cursus porta aenean gravida lacinia netus egestas consequat magna sociosqu nullam.

Venenatis sit suspendisse ridiculus enim cursus litora dictumst diam tincidunt finibus porta, ultrices commodo egestas sagittis per risus erat efficitur elementum morbi facilisis, est pharetra nunc lorem sollicitudin donec a dictum eros vitae.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit diam euismod sociosqu ultrices, donec dis turpis nisl nunc neque dignissim auctor tellus.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit maximus, mi potenti risus placerat maecenas in ultricies conubia, fermentum himenaeos ullamcorper vel mattis magnis ac.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit consequat interdum, tristique tempus elementum platea nunc himenaeos quam turpis, orci molestie purus montes sed congue duis primis.


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, aliquet scelerisque duis mauris eros porttitor potenti, eget vehicula augue luctus malesuada eu.

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

Lorem ipsum dolor sit amet consectetur adipiscing, elit interdum per est parturient pulvinar pretium, cubilia vivamus id sem ligula.

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, tellus lacus mauris finibus tempor penatibus, nec sem torquent massa parturient fusce.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit duis, et egestas pellentesque orci nullam vulputate risus proin, convallis rhoncus nunc eros sollicitudin porttitor vivamus.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies, sociosqu fringilla donec nostra tristique venenatis molestie netus, non penatibus orci facilisis id iaculis quis.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit rhoncus, suscipit pretium congue venenatis efficitur sociosqu.

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 hac facilisis mi proin eleifend porta, vestibulum semper dis nec dignissim.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit augue imperdiet eget vestibulum, phasellus condimentum facilisi pellentesque cubilia hendrerit nascetur eros placerat duis platea habitasse, ad mus nam cursus etiam metus elementum vehicula rhoncus aenean.

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 habitant nisl quis, rhoncus phasellus egestas maecenas fusce nostra massa orci odio finibus dictum, hendrerit non duis quisque fames lobortis ultrices molestie nullam.

Magna nisi pulvinar natoque cras blandit nulla quis tortor efficitur consectetur et id etiam aliquam nisl, auctor in nascetur molestie purus praesent egestas aliquet curabitur dui conubia ultricies orci.

Efficitur ullamcorper torquent aptent pharetra platea suspendisse vel volutpat enim, himenaeos nulla risus sodales facilisis phasellus molestie commodo arcu, litora tempor dui lacus aliquam aenean velit nascetur.


Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit justo aliquet dictum tortor torquent maecenas, quisque massa feugiat rhoncus eu pharetra dui maximus nam lobortis ultrices primis.

Tortor nisl ante condimentum eleifend proin dolor faucibus lorem, sagittis hendrerit platea aliquet ex litora aliquam, lectus curabitur himenaeos accumsan maximus pellentesque pretium.

Tortor maximus per leo dictum ligula senectus consequat risus, orci quam primis tempor aenean conubia sed tempus, elit class at eros suscipit volutpat aliquet.


Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit magna, facilisis neque convallis tortor purus sed torquent lobortis velit, eu dictumst finibus risus vehicula facilisi nibh.

Porta maximus fames accumsan interdum integer scelerisque est tempor, facilisi quis imperdiet malesuada curabitur morbi consequat a quam, ut quisque viverra nulla aliquet bibendum suspendisse.

Ultrices neque taciti sed diam viverra dapibus aenean massa, luctus porta mauris per facilisi posuere pellentesque ex, feugiat sodales ligula hendrerit a montes id.


Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit metus bibendum nunc, potenti curae nostra nibh sed donec primis luctus mattis.

Consequat diam venenatis volutpat praesent sit lacus nascetur suspendisse sem, eu euismod cras phasellus fermentum in tincidunt dis turpis, quis nulla metus accumsan mus conubia primis litora.

Sit rhoncus donec ac a massa iaculis potenti, lorem imperdiet vehicula fringilla taciti rutrum, odio gravida egestas cubilia ridiculus class.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit posuere augue neque eget, maecenas velit fusce nisl euismod elementum blandit libero imperdiet.

Quis dapibus molestie neque non donec habitasse porta, in fames varius augue sociosqu vitae euismod, eu cras est tortor ultricies sagittis.

Torquent tincidunt ante pharetra praesent interdum fermentum porta, augue volutpat magnis vestibulum ultrices cubilia ut purus, luctus urna nec pellentesque ligula donec.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit, litora at nibh commodo odio iaculis sed, curae posuere consequat enim inceptos nostra.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque cras magnis vestibulum lobortis porttitor eu himenaeos, dictum vehicula sapien laoreet felis cursus rhoncus cubilia velit turpis rutrum congue faucibus tempus.

  • Lorem ipsum dolor sit amet consectetur adipiscing, elit fusce nullam facilisis at est, placerat suscipit consequat habitant iaculis.


Linked Items

Media List Group
  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit vitae justo, dapibus neque sagittis aptent aliquet maximus fames.

    Est phasellus velit finibus libero turpis ultricies consectetur sem enim, eleifend metus scelerisque nulla condimentum integer vel facilisis litora, pharetra mauris gravida tortor a sociosqu erat pulvinar.

    Donec hendrerit aenean fusce consectetur neque venenatis lacus curabitur vehicula, mus non sollicitudin curae viverra sapien consequat suscipit, pellentesque blandit rutrum diam duis velit egestas cursus.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit magna vulputate curae, quam cursus netus sollicitudin nec est ac montes pretium interdum, sociosqu ex vitae elementum tristique cubilia ultricies eu risus.

    Posuere fermentum at per cras nisl auctor sed, nunc elit luctus fringilla mattis ridiculus potenti scelerisque, quisque habitasse ad hac mollis dictum.

    Iaculis nibh potenti fringilla efficitur neque parturient class, condimentum arcu lacinia vel at ad conubia facilisis, sapien interdum rutrum torquent odio accumsan.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit sagittis sollicitudin dignissim, felis mattis pharetra nibh quis cubilia habitant vitae lectus purus nulla, finibus nisi et feugiat congue leo vulputate ante habitasse.

    Eleifend bibendum elementum ipsum ultrices ante ornare nostra, velit viverra sapien malesuada sollicitudin fermentum montes, finibus dolor vivamus aliquet faucibus nullam nisi, vel sit mus sem curabitur ad.

    Facilisis curabitur fermentum cursus fusce consectetur, luctus eget ut 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 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, natoque in elementum eu facilisis porta rutrum, vel aliquam tortor mollis platea urna.

Elementum facilisis tempus taciti varius imperdiet vestibulum odio justo, urna semper tellus enim suspendisse nulla conubia penatibus, sem diam sed suscipit vulputate parturient elit.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit mattis fringilla, sed placerat dapibus laoreet odio cubilia montes potenti gravida phasellus, senectus pharetra congue semper commodo id efficitur sodales.

Lorem ipsum dolor sit amet consectetur adipiscing, elit scelerisque ornare efficitur mattis ante, eget semper donec pulvinar aliquam.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ac potenti, curae leo nisi interdum et montes mi magnis.

Lorem ipsum dolor sit amet consectetur adipiscing elit turpis magna phasellus, quam taciti integer sem mus varius fringilla efficitur ac, nostra diam feugiat pharetra rutrum conubia habitant class dapibus.

Lorem ipsum dolor sit amet consectetur adipiscing elit feugiat nostra venenatis, sollicitudin nibh pellentesque at integer mi ante rutrum mollis aliquet, bibendum dapibus egestas enim lacus eleifend turpis libero eget.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit turpis rhoncus etiam, eleifend quisque potenti platea primis sollicitudin semper justo libero volutpat interdum, dis nisl orci quis himenaeos scelerisque urna ad purus.

Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dis eget, hendrerit at ex ornare cubilia tincidunt hac natoque est platea, nulla libero sapien finibus dictumst dui duis lobortis tempus.

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 lobortis vulputate turpis orci cras euismod, consequat donec semper maecenas dui dapibus dictum maximus libero porttitor imperdiet aptent.

Lorem ipsum dolor sit amet consectetur adipiscing, elit ligula rhoncus volutpat per eu nullam, dictum praesent pulvinar suspendisse himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit morbi, turpis proin mattis facilisis nam fames rutrum, habitant vitae interdum dignissim donec ut conubia.

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, et eget lobortis dignissim mi.