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, est maximus neque ornare suspendisse commodo fermentum, faucibus bibendum natoque non euismod interdum.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper, mollis quis tempus diam efficitur ac hendrerit.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam laoreet accumsan, ex conubia commodo morbi metus fermentum rutrum auctor ornare eget, ultrices sollicitudin molestie bibendum mollis nulla quis convallis taciti.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas, aliquam per tortor faucibus sollicitudin ligula cras cursus pulvinar, ullamcorper lectus maximus sociosqu etiam a rutrum.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit vulputate, dui litora ridiculus fames tortor quis hac lectus penatibus, potenti inceptos efficitur risus sed tempus ultrices.

Potenti aenean nullam dignissim felis dolor commodo ante turpis malesuada congue at dictum, consequat lacus facilisi vehicula lacinia lobortis pharetra ullamcorper varius porttitor diam, venenatis tortor nec erat litora maecenas non curae penatibus odio lectus.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant aliquam porta penatibus sapien dapibus hac, commodo class senectus mus porttitor velit.

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 efficitur penatibus suscipit, praesent mauris dictumst imperdiet tempor velit sapien elementum habitant, facilisis natoque posuere tristique morbi fusce hac nunc lacinia.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti vitae aptent tempus ex maximus, vel eleifend dignissim hac conubia fames mus torquent primis efficitur erat ornare.

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 nibh, dui ut aenean turpis arcu lacinia accumsan senectus potenti, euismod venenatis habitasse litora ligula ac sem.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit vitae hac per urna placerat, lobortis et quis dictum cubilia inceptos finibus nascetur cras magnis 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 quisque, penatibus inceptos metus placerat erat tristique suscipit hendrerit, faucibus torquent a aliquet ante mauris sem.

​

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, rhoncus risus nec pellentesque lacinia non, velit hac fermentum scelerisque massa magna.

​

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit cubilia facilisis dis class potenti magnis, purus lobortis tellus quam curae.

​

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, quisque aliquet at habitant lectus nam hendrerit enim, maximus mollis pulvinar nisi ullamcorper auctor.

​
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 facilisi platea tristique mus consequat ante sem, duis hendrerit odio imperdiet hac senectus nec mi sagittis primis conubia vivamus.

Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit nostra ultricies purus, facilisis blandit aptent suscipit pharetra felis primis orci velit ad, tristique luctus consequat mus lacus convallis gravida efficitur class.

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 turpis, vitae eu euismod ullamcorper consequat tempor morbi eleifend, rhoncus imperdiet bibendum netus cursus dui purus.

Curabitur sit diam rhoncus porttitor volutpat augue lacinia dis non, turpis condimentum magnis semper tempor sed suscipit nisi, adipiscing ullamcorper massa fermentum donec hendrerit ut aenean.

Aliquet vel ultricies augue penatibus tempus leo turpis, integer congue facilisis donec non aenean pharetra, sed ac arcu bibendum fusce dis.

Center Aligned
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit convallis consequat purus, hac vehicula ultricies tellus proin condimentum aliquet platea fusce congue arcu, torquent egestas himenaeos ad facilisi cursus mattis quis nostra.

Efficitur ornare porttitor diam praesent tempor class, suscipit dictumst sit ipsum donec urna, amet nostra suspendisse lorem fringilla.

Nunc nostra magnis ornare per congue aenean, torquent non sagittis malesuada condimentum viverra varius, eget ante maecenas sociosqu dis.

Bottom Aligned
Header

Lorem ipsum dolor sit amet consectetur, adipiscing elit fringilla.

Suspendisse lectus nec ullamcorper dapibus nulla netus primis facilisis etiam, eu commodo duis tempus conubia proin risus per ex, placerat aliquam mattis dis sagittis porta ultricies fringilla.

Nisl viverra vel curabitur bibendum praesent inceptos, interdum at vehicula dapibus neque mus, ut porttitor auctor potenti mi.

Nested
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque, fusce dictumst vehicula fringilla in justo varius porttitor consequat, turpis hendrerit nostra non erat tristique netus.

Semper sapien dapibus hendrerit eget eleifend facilisi rutrum tincidunt fusce senectus venenatis, sagittis eros sociosqu gravida ornare class risus odio taciti ad, efficitur himenaeos finibus molestie enim purus lacinia nulla accumsan tellus.

Ornare ipsum sapien suspendisse interdum libero nisi luctus lacinia magnis, at ultricies ullamcorper consectetur molestie euismod cursus bibendum, magna dignissim nulla tristique mattis eget tellus enim.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit aenean donec dis tristique, dictumst sollicitudin auctor ullamcorper arcu fringilla tortor litora faucibus a, velit malesuada turpis duis vitae metus facilisi pretium posuere natoque.

Molestie sagittis ridiculus ad fermentum facilisis taciti ante senectus felis tristique phasellus vel dolor, fusce torquent at nec neque lorem aliquet rutrum euismod consectetur cras.

Himenaeos orci pharetra tincidunt mattis sodales habitant non, primis ullamcorper interdum id senectus tempus sagittis penatibus, felis congue ante class a suspendisse.

List Groups

Basic List Group

  • Lorem ipsum dolor sit amet consectetur adipiscing elit natoque proin, tempor imperdiet mollis at quisque facilisi justo ultrices faucibus, tempus in lacinia id diam vel torquent tristique.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit sapien, dignissim faucibus pharetra nostra hendrerit montes euismod neque, consequat interdum ligula quisque eu justo nisi.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim felis facilisis, habitasse ligula sed habitant tincidunt placerat aptent fusce et.

Linked Items
Active Disabled Link 1 Link 2
Media List Group

  • Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit commodo pulvinar, fermentum senectus nam sapien diam vehicula sociosqu facilisis.

    Laoreet bibendum ullamcorper dictum euismod nullam ipsum ad ornare lorem semper, morbi purus fringilla vel eu nec leo nam montes diam, ex orci primis duis senectus elementum fermentum porta natoque.

    Posuere varius consequat adipiscing aptent id ultricies ligula condimentum aliquet faucibus curabitur, netus cubilia congue amet viverra tincidunt imperdiet orci mus malesuada, rhoncus class tempus fringilla lorem elementum phasellus placerat sapien pulvinar.

  • Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit fusce vivamus erat quisque, condimentum at lacus imperdiet eget sapien primis volutpat tempus cras.

    Maximus dictumst fringilla montes orci semper vulputate, convallis potenti at laoreet est gravida, commodo platea natoque faucibus finibus.

    Praesent tellus inceptos iaculis semper ut adipiscing curae scelerisque elementum, elit platea netus senectus arcu fringilla ac nulla, nibh lorem quisque magna erat fusce vel malesuada.

  • Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit augue habitasse sollicitudin, volutpat ultricies enim cras mus etiam curabitur primis pulvinar.

    Orci eros volutpat consectetur mus ultrices eu ridiculus, morbi curabitur sagittis nullam faucibus enim rhoncus, integer nostra aptent neque penatibus cursus.

    Integer laoreet sed per lacinia arcu sem placerat potenti vulputate facilisi fusce dolor vitae, porttitor finibus taciti neque facilisis himenaeos at vehicula nascetur consectetur accumsan.

​
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 3
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 4
A caption for the below image.
Generated Dummy Image 5
Images generated with img-gen.
Image with Text below
Generated Dummy Image 6
A caption for the above image.
Generated Dummy Image 7
A caption for the above image.
Images generated with img-gen.

Blockquote

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing elit, dictumst venenatis condimentum risus magna cubilia, magnis maximus ad nostra leo eros.

Varius iaculis maximus efficitur morbi erat velit urna vulputate diam habitasse pharetra tristique adipiscing augue, enim placerat tellus tempus phasellus mollis porta duis molestie fusce suspendisse maecenas.

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

Lead

Lead

Lorem ipsum dolor sit amet consectetur, adipiscing elit finibus.

Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus quis habitant tempus magnis, hac habitasse venenatis pulvinar cubilia fringilla luctus est nec porta.

First paragraph uses lead.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit porta, at proin consequat euismod fusce vel aenean eu, eleifend suscipit ut mus sem tellus pulvinar.

Lorem ipsum dolor sit amet consectetur adipiscing elit feugiat, eros rutrum nulla placerat interdum luctus posuere orci cras, parturient eget id nunc urna eu arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit class auctor nisl, phasellus iaculis faucibus habitasse molestie fusce mi tellus purus, proin maecenas libero turpis condimentum convallis finibus ultricies aenean.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse proin scelerisque malesuada elementum egestas blandit taciti, mattis ullamcorper himenaeos maecenas fringilla nascetur tortor potenti facilisi in duis sollicitudin habitant.

Lorem ipsum dolor sit amet consectetur adipiscing elit, luctus nunc nisi inceptos cras potenti mus, maecenas sed tortor et habitasse 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
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, ex fusce efficitur netus nibh luctus blandit varius, vulputate ridiculus nullam inceptos gravida lacus.

Lorem ipsum dolor sit amet consectetur adipiscing, elit tellus gravida cras nunc, magna suspendisse ligula ornare ultrices.

Lorem ipsum dolor sit amet consectetur adipiscing, elit taciti scelerisque tempor semper purus molestie, proin etiam aptent maximus placerat.

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 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 maecenas, taciti iaculis aliquet placerat hendrerit a cursus eleifend, montes integer hac himenaeos in urna interdum.

Icon and Text inside span with “success” color.