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 curabitur venenatis rhoncus sodales quis lectus quisque, pulvinar diam aenean convallis neque nullam senectus turpis lobortis integer libero rutrum.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit consequat cubilia dignissim, primis parturient ad fringilla magnis efficitur cras nam massa pharetra, magna interdum ornare elementum taciti vitae volutpat venenatis integer.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit ullamcorper quisque nam sem, vestibulum donec suspendisse facilisi curae.

Narrow your browser window to see the columns stack.
3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, nostra quisque erat ad aliquam augue et, consequat arcu maecenas massa non natoque.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque eros praesent conubia curabitur augue et mattis maximus lacus, hendrerit dictumst fringilla euismod ad aptent gravida dapibus natoque nibh neque mus inceptos id vel justo.

Egestas elit finibus fringilla natoque accumsan pharetra lacinia fames, proin mollis pellentesque eros primis platea molestie ex, interdum pretium congue metus neque auctor pulvinar.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit elementum laoreet, cras viverra bibendum per.

These columns will not stack when you narrow your browser window.
2 columns with an offset in between
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit molestie vulputate neque dapibus, ullamcorper cras lacinia fringilla est curae nunc sem gravida eget, aliquam tristique platea dictumst ac fames malesuada tempus cursus conubia.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, eu aenean donec pellentesque vitae scelerisque nisl, arcu congue turpis mollis interdum rhoncus.

These columns will not stack when you narrow your browser window.
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
These columns will not stack when you narrow your browser window.

Responsive Embed

Embedded Video

No real video

Narrow your browser window to see the video size adjust.

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 ligula eu aptent sapien, suscipit elementum taciti libero netus.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit montes vitae, vel in libero purus a sodales placerat ex, accumsan est magnis nibh suscipit senectus quisque platea.

Narrow and widen your browser window to see the effect.

Cards

Simple card with a body element
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
​
List group is flush with the card
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
List group is flush with the card. Links in footer are next to each other.
Simple card with image cap

Card Title

Lorem ipsum dolor sit.
Image caps are supported with the [card-img] shortcode and the top or bottom flag.
Simple card with image overlay

Card Title

Lorem ipsum dolor sit.
Image overlay cards are supported with the [card-img-overlay] shortcode.
Card with header and footer
Example Header

Card Title

Lorem ipsum dolor sit.
Example footer.
Card header and card footers are supported with the [card-header] and [card-footer] shortcodes.
Card group

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.
​
Use card groups to render cards as a single, attached element with equal width and height columns.
Card deck

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.
Use a card deck for a set of equal width and height cards that aren’t attached to one another.
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 can be organized into Masonry-like columns with just CSS by wrapping them in [card-columns].
Cards with shadows

No Shadow

Lorem ipsum dolor sit amet consectetur, adipiscing elit nec himenaeos, gravida consequat cursus neque.

​

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti, quis conubia litora euismod pellentesque non.

​

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit leo, nostra magnis dapibus habitant blandit finibus vivamus arcu nulla, hac rhoncus cubilia tristique sagittis mi volutpat.

​

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit odio, potenti auctor dignissim integer diam vivamus leo ultricies lacus, pretium nascetur sem euismod class nisi posuere.

​
Use the shadow utilities to add a shadow to the cards.

Icons

Free Icons
  • Facebook
  • Arrow Lft
  • Arrow Right
  • Arrow Up
  • Arrow Down
  • Folder Open
  • Cloud
  • Coffee
  • Car
  • File
  • Bars
  • Thumbs Up
See the Font Awesome Gallery for more icons.
Stacked Icons
​​​
The second icon is bigger than the first.

Buttons

Standard buttons
Hyperlink
Outlined buttons
Hyperlink
Button size
Active buttons
Disabled buttons
Block level buttons

Button Groups

Basic example
The large button group is justified and vertical.
Button Toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Dropdowns

Single Button Dropdown
Header
Action Another action Something else here
Separated link
Any single [button] or link can be turned into a dropdown toggle with some markup changes.
Split Button Dropdown
Action Another action Something else here
Separated link
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of split for proper spacing around the dropdown caret.
Drop Variations
Action 1 Action 2
Separated Action
Action 1 Action 2
Separated Action
Action 1 Action 2
Separated Action
Use drop="up|left|right" to show the dropdown over, left or right to the button or link.

Navs

Simple Navigation Links
Navigation Link and Dropdown with Pills
Note: The [dropdown-menu] has to be inside the [nav-item].
Navigation Link and Dropdown with Tabs
Note: The [dropdown-menu] has to be inside the [nav-item].
Collapsible Navigation Bar

Light Color:

Dark Color:

Narrow your browser window to see the menu bar collapse.
Vertical Navigation Bar
No Branding or toggler with the vertical navigation bar.

Breadcrumb

Breadcrumb style links
Use active for the currently active breadcrumb.

Badge

Badge styles
New Messages 9 ​New Messages 9 ​New Messages 9 ​
Use utility class to format the badge and right to float the badge to align to the right of its container.

Jumbotron

Normal Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit eu non nec tellus, lacinia et cursus mi malesuada nulla magnis tempus congue.

Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque diam platea, magnis purus accumsan viverra per scelerisque felis in euismod mi tempus, cubilia torquent donec arcu non penatibus aenean suspendisse pretium.

The fluid jumbotron is still confined to its parent’s container.

Alerts

Alerts
Use the alert-link class to quickly provide matching colored links within any alert.
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, tempus nam fusce euismod curae lacinia natoque, bibendum vitae convallis ornare sapien in.

Vitae fames suspendisse ligula vestibulum vivamus sagittis, metus feugiat magnis scelerisque mus class, adipiscing risus netus augue condimentum.

Penatibus congue augue eget turpis libero at tortor posuere praesent rhoncus, mus aenean ultricies sit mauris pellentesque scelerisque inceptos mi, elementum duis mollis diam lacinia tincidunt nostra sed lacus.

Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit finibus pretium, justo eget ridiculus per maximus consequat nisl a, dictumst fermentum curabitur primis malesuada blandit nam montes.

Finibus phasellus in varius nec nostra iaculis molestie mi accumsan, rutrum ad primis aliquet gravida efficitur elementum sollicitudin integer blandit, dictumst ante volutpat morbi feugiat pulvinar ornare fermentum.

Inceptos integer torquent neque nulla phasellus viverra consectetur netus orci, nibh id quam nam sed sit volutpat velit, pharetra habitant malesuada aliquet risus proin conubia class.

Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit maximus morbi, ac aptent gravida magna venenatis dapibus non odio fames, vestibulum duis vivamus magnis arcu enim nisl ut.

Accumsan augue nascetur proin sapien interdum quam at ipsum eget, dapibus feugiat pellentesque ac sit molestie rhoncus taciti.

Convallis penatibus dolor bibendum pulvinar phasellus ac placerat id, pellentesque dignissim dictum inceptos scelerisque diam mollis, congue in curae leo imperdiet vehicula posuere.

Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit dui placerat, massa ligula fermentum facilisis libero natoque dis vehicula, semper praesent ornare habitant porta duis odio malesuada.

Mauris posuere proin etiam maximus senectus mus aptent ut ornare, consectetur habitasse est erat enim tristique scelerisque primis, laoreet condimentum luctus molestie tincidunt cras conubia eget.

Laoreet ex pulvinar fames neque turpis nibh netus suspendisse arcu, metus dui quisque lorem nascetur nulla finibus libero nisi vulputate, semper at primis nostra efficitur taciti urna tortor.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit conubia, fermentum rhoncus platea mollis primis quisque faucibus, mi torquent rutrum eros ultrices ultricies viverra.

Montes praesent cubilia suscipit senectus potenti laoreet at dapibus, eleifend justo gravida mattis vitae neque natoque metus sit, iaculis aliquet proin venenatis class parturient viverra.

Ridiculus potenti morbi cubilia ultricies consectetur interdum faucibus netus conubia, malesuada nulla diam integer vitae class volutpat laoreet.

List Groups

Basic List Group

  • Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum consequat sapien tempor, nisi nulla ad pellentesque feugiat nunc erat pharetra netus quam ut, commodo donec posuere rhoncus venenatis ex hendrerit eu litora accumsan.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper tellus lacinia dui maximus, quam in cubilia at non ultricies mattis potenti vehicula imperdiet.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit in habitasse leo, aenean vel imperdiet ultrices a hac parturient libero maecenas, class auctor inceptos nullam habitant morbi cras luctus euismod.

Linked Items
Active Disabled Link 1 Link 2
Media List Group

  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit euismod tempus phasellus, congue diam tincidunt maximus pretium neque tellus elementum auctor.

    Malesuada arcu vulputate curae lectus lobortis nisl, tempor a in rhoncus mus, eget eleifend posuere mattis sagittis.

    Varius magnis amet lobortis non egestas facilisis, pharetra erat mus porta penatibus risus, proin nunc urna ipsum tempus.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit, facilisi ullamcorper tellus orci metus dapibus fermentum, quis porttitor dictum pharetra malesuada vestibulum.

    Ac vivamus phasellus a fusce quam viverra conubia, sapien mollis fames dolor dignissim dictumst orci imperdiet, nibh nostra risus bibendum penatibus tristique.

    Faucibus curae nullam condimentum vehicula pellentesque praesent consectetur, cras luctus torquent rutrum parturient volutpat himenaeos nostra, dignissim dui aenean finibus blandit pulvinar.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit, nostra quis libero faucibus maecenas eget fermentum elementum, porttitor placerat ad ante ligula odio.

    Nam ex convallis curae eros euismod tristique in sagittis semper, vel sem netus ornare nunc sit habitant.

    Vivamus ultricies at suspendisse convallis dictumst pellentesque fermentum nullam, est volutpat malesuada neque pretium odio ullamcorper eleifend aenean, accumsan iaculis efficitur non augue metus id.

​
Use the media flag at the [list-group] tag and the list-group flag at the [media] tag.

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
Some bootstrap themes already have their [ [/card-body]
Images generated with img-gen.

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
Images generated with img-gen.
Image with Text below
Generated Dummy Image 41
A caption for the above image.
Generated Dummy Image 42
A caption for the above image.
Images generated with img-gen.

Blockquote

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse, tempor inceptos aliquam curae libero at est, suspendisse interdum rhoncus luctus duis ac metus.

Rhoncus inceptos placerat nostra porta nisi consectetur molestie, accumsan quisque enim urna habitasse maecenas, fames metus vehicula dictumst aliquet ligula.

Automatically created by lorem ipsum generator
​
Images generated with img-gen.

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit, mattis sodales augue eros montes ornare ac, varius iaculis molestie convallis et scelerisque.

Lorem ipsum dolor sit amet consectetur adipiscing elit arcu ornare volutpat, mollis et justo imperdiet malesuada etiam mi dis natoque enim vehicula, purus sollicitudin nunc vestibulum nibh quam taciti fusce donec.

First paragraph uses lead.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit ac finibus, lobortis euismod nibh hendrerit magnis pellentesque iaculis velit.

Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus turpis, ut suspendisse nisi ullamcorper bibendum placerat himenaeos dis nunc a, est viverra egestas arcu at augue faucibus tempor.

Lorem ipsum dolor sit amet consectetur adipiscing elit lacus fames augue sed feugiat aliquet, mollis in erat laoreet nascetur posuere ultrices cursus quis arcu pellentesque.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit at mattis, metus ullamcorper luctus vitae suscipit sed sapien leo, nisl ridiculus facilisis cras malesuada aenean taciti consequat.

Lorem ipsum dolor sit amet consectetur adipiscing, elit lectus eget hendrerit netus conubia inceptos, urna enim dui tempor mus.

Flex

Flex Row
Flex Reverse Row
Inline Flex
Inline Reverse Row Flex
Flex Column
Flex Reverse Column
Flex Justify Center
Flex Align Items Center
The flex container has a fixed height of 150px.
Flex Item Self-Align
2 is aligned at start, 4 at center and 6 at end
Flex Wrap

No Wrap

Wrap

Reverse Wrap

Flex Row Fill
Flex Grow
Flex Shrink
Flex No Shrink

Tooltip

Tooltip Examples
Tooltips work best with [button]s or links but can be attached to any element.

Popover

popover Examples
Popovers work best with [button]s or links but can be attached to any element.

Accordion

Basic Accordion

Lorem ipsum dolor sit amet consectetur adipiscing elit platea diam curae, velit nibh turpis pretium auctor vivamus non consequat nam est congue, litora enim tellus nullam lacus fusce sagittis proin tempus.

Lorem ipsum dolor sit amet consectetur adipiscing elit tincidunt quis, imperdiet ultrices pulvinar lobortis netus est morbi dignissim, senectus vel odio quam tristique curabitur vivamus placerat.

Lorem ipsum dolor sit amet consectetur adipiscing, elit ultricies taciti tellus morbi, quis nullam quam odio aptent.

Carousel

Carousel with text
Card body adjust to paragraph height.
Standard Carousel
4 slides, pause, no controls, no indicator, wrap, interval 5000ms
Customized Carousel
4 slides, no pause, controls, indicator, wrap, interval 1000ms

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 convallis sollicitudin congue litora vulputate, id proin vitae rutrum metus condimentum inceptos libero ante iaculis.

Icon and Text inside span with “success” color.