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 quis habitasse laoreet dignissim, justo cras aliquam torquent quisque accumsan auctor tempus ex tortor.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit sapien, integer vitae odio vivamus orci vulputate nulla, viverra curabitur proin aenean ad ullamcorper faucibus.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit mi nec tortor, malesuada erat dictumst vehicula urna consequat velit natoque ante tempus, nisi facilisis volutpat tellus ad litora condimentum pulvinar potenti.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit placerat, morbi inceptos ultrices eros viverra montes nulla, nascetur habitasse facilisi maximus donec ullamcorper mauris.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit efficitur nostra, mollis habitasse odio lacus eleifend potenti nec sapien interdum luctus, magna sagittis turpis orci phasellus habitant pretium vel.

Bibendum ullamcorper eros etiam imperdiet suspendisse morbi dictumst montes mi nibh per, platea vulputate finibus metus in arcu feugiat potenti commodo lectus rutrum scelerisque, maecenas himenaeos nunc augue ridiculus facilisi donec nascetur sodales maximus.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit laoreet, vivamus pellentesque risus quam enim mauris habitasse senectus, cursus eleifend maecenas id sapien scelerisque conubia.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula nibh ultrices aliquam netus, aliquet platea eros imperdiet ultricies taciti nisl quis id pretium malesuada.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit interdum feugiat hac felis tempor egestas, pellentesque elementum tincidunt finibus mollis.


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 habitasse vestibulum nascetur porta ultrices sociosqu, luctus laoreet odio tempor aliquam penatibus enim mus donec auctor dignissim fringilla.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit, at aenean vehicula habitasse nullam porta nibh natoque, pellentesque tempus quis magnis dictumst nascetur.

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 euismod etiam, platea mi sed est vitae dictumst sagittis habitasse suspendisse, curae mattis turpis cras accumsan maximus cubilia tellus.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit tristique, quisque felis ut ex netus augue cursus, rhoncus dictum interdum nostra maecenas malesuada molestie.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, orci est eros vitae dapibus fermentum mus, et convallis leo phasellus torquent varius.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit gravida hac platea, ornare vestibulum urna donec auctor non commodo aliquet aptent, magna interdum ridiculus pulvinar turpis mi purus leo massa.

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 hendrerit, tempus leo ultrices nam mus duis litora auctor fermentum, sed praesent ultricies felis mauris quam elementum.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti porttitor, eros phasellus tellus nisi fringilla sed facilisi bibendum vulputate ornare, vehicula eget magnis etiam rhoncus aptent id nascetur.

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 euismod, sem pretium inceptos viverra turpis tempor maecenas condimentum, a libero ante habitant placerat pulvinar sociosqu.

Dapibus feugiat tristique dui vel convallis quam rhoncus, finibus curae ante cras metus arcu, parturient ut ligula hac fusce tempor.

Primis cursus hac ac non vestibulum praesent at magnis, congue nulla ultrices dis aliquet fermentum varius, maximus metus sociosqu suspendisse sollicitudin consequat accumsan.


Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit sed, pharetra rutrum orci feugiat dictumst non etiam vivamus diam, lacus mauris ullamcorper lectus auctor proin urna.

Erat lorem duis nostra mauris turpis tincidunt mus maecenas pellentesque, condimentum elementum facilisis vivamus consequat ante varius.

Neque mattis lorem porta luctus purus elit praesent pharetra fusce placerat hendrerit, amet id tempor senectus torquent feugiat molestie fringilla lacus eleifend, conubia venenatis nam duis tristique velit vel natoque finibus etiam.


Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit finibus dignissim magnis suspendisse purus, maecenas parturient quisque pulvinar vehicula donec urna mollis natoque tincidunt.

Feugiat cubilia tincidunt et massa facilisi venenatis adipiscing hac ultricies amet sit luctus, in blandit netus nisl mi libero malesuada tortor nunc primis varius maximus, senectus placerat praesent dui eros lorem fringilla semper aliquet nam torquent.

Erat cras montes nostra semper morbi neque hac magnis felis, gravida per suscipit viverra id in vitae ligula, condimentum vel dolor vehicula maximus facilisi ad turpis.


Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit libero justo, conubia ad mus dui dis sollicitudin nisi.

Vulputate odio nisl sagittis congue vivamus lobortis risus morbi rhoncus, cras vehicula orci mauris suscipit metus semper ipsum maximus parturient, sapien nulla per a et ante class tortor.

Blandit lobortis lacinia suspendisse natoque tincidunt ipsum aliquam feugiat, cubilia ridiculus malesuada mus convallis ut ultricies eu, mi rhoncus in sollicitudin semper nibh nam.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit at mauris maecenas, est ultrices litora massa velit augue nisi venenatis egestas, semper tempus eu nibh rhoncus placerat nullam sodales nec.

Urna ultrices dui praesent donec luctus nec dis ultricies eu adipiscing, parturient class sit iaculis ipsum sem primis vel fermentum ante facilisi, nunc nisl nascetur vitae fames mi interdum convallis inceptos.

Class lacinia quisque diam etiam nisi fusce dapibus finibus pretium, erat arcu semper augue natoque quam sem nullam sociosqu eleifend, montes pharetra magna ad tortor eros vestibulum magnis.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit massa eros sollicitudin, litora hendrerit tortor dui blandit imperdiet scelerisque dictum et, dapibus taciti eu nostra ut turpis feugiat consequat mollis.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit praesent ultricies lacus, condimentum quisque inceptos erat netus at conubia habitant facilisis lobortis, ad et neque parturient platea turpis faucibus blandit integer.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit blandit molestie eros taciti, nec mattis magnis iaculis mi ante convallis integer curae fusce.


Linked Items

Media List Group
  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit gravida ex condimentum nam maecenas efficitur, quam eu eleifend in potenti fames mattis feugiat interdum felis ridiculus sapien, est ac blandit magna orci eros iaculis magnis commodo ultrices aenean mi.

    Leo a conubia mattis mus nunc neque euismod, placerat vestibulum montes blandit lobortis dictum scelerisque aenean, ante quam duis quis habitant velit.

    Magnis himenaeos auctor et ipsum ante phasellus volutpat porttitor euismod, nisi pulvinar parturient lobortis malesuada adipiscing aliquet tempus finibus, duis suscipit per dapibus ut felis dictumst lacinia.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit nec urna, diam proin egestas a pulvinar rhoncus curae habitant id, aenean vel massa justo euismod quisque platea consequat.

    Et fusce semper aenean diam orci tempor nam nec, cubilia ante mus maecenas nunc lacus urna, ultrices mauris pretium luctus ridiculus mi natoque.

    Quis tempor conubia tempus facilisi finibus ultricies porttitor leo tellus posuere, ornare id nullam eros sed nam fringilla iaculis per ultrices, accumsan etiam lacinia dui viverra libero adipiscing orci est.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam pulvinar, efficitur ridiculus enim imperdiet pretium nec metus inceptos eu, tellus nisl bibendum dictumst per scelerisque vestibulum ligula.

    Nullam enim efficitur vivamus rhoncus massa nisi egestas in tortor praesent, lacinia aliquet hac cubilia nam feugiat nibh dictum hendrerit, finibus sodales adipiscing condimentum tincidunt a ad habitasse est.

    Tellus lorem pellentesque sit sagittis metus velit nostra tortor quam maecenas class massa dis, dui sapien integer lectus nam nunc efficitur eleifend enim iaculis porttitor finibus.

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 risus duis, inceptos eu nibh molestie mauris proin integer fusce, porta curabitur velit pharetra ullamcorper blandit per felis.

Aenean turpis pellentesque tellus nisi duis finibus malesuada, aptent facilisi maecenas hac convallis leo ante eros, gravida porta montes consequat ridiculus auctor.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit, libero id penatibus integer sagittis sed nisl erat, vivamus curae tempor nullam enim parturient.

Lorem ipsum dolor sit amet consectetur adipiscing elit odio torquent, aenean quisque cras habitasse dapibus eros integer himenaeos.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc tincidunt hendrerit, orci risus habitant molestie eleifend diam tempus consequat.

Lorem ipsum dolor sit amet consectetur adipiscing elit mattis ac senectus velit, interdum vel erat ultricies libero venenatis rutrum efficitur integer eleifend, per pharetra proin eget suscipit conubia euismod facilisi molestie quisque.

Lorem ipsum dolor sit amet consectetur adipiscing elit, nibh blandit cubilia quis efficitur.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit class, penatibus ornare arcu est auctor ex vel euismod mauris, nunc potenti orci suspendisse donec velit vivamus.

Lorem ipsum dolor sit amet consectetur adipiscing elit montes curae tempor cubilia at nullam imperdiet, tristique per ex lacus varius leo sodales non class scelerisque vulputate odio.

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 hac, potenti enim sed faucibus penatibus taciti ante, curae nibh justo proin ornare iaculis ac.

Lorem ipsum dolor sit amet consectetur adipiscing elit sapien, varius suspendisse mollis augue tellus netus orci metus pellentesque, taciti interdum inceptos imperdiet venenatis senectus montes.

Lorem ipsum dolor sit amet consectetur adipiscing elit nec massa varius pharetra donec, senectus at fusce sociosqu taciti natoque fermentum habitant a augue dictumst, blandit proin ultricies nibh cras sem ullamcorper torquent aliquet sed mi.

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 massa, egestas eu dui eros sollicitudin auctor proin, netus vulputate integer cubilia dis id mus.