Lead body copy

The examples below were created using the Bootstrap Shortcodes for WordPress plugin. While there are lots of other plugins that offer shortcodes for the Bootstrap framework like Easy Bootsrtap Shortcodes, DW Bootstrap Shortcodes and Twitter”s Bootstrap Shortcodes Ultimate Add-on we found Bootstrap Shortcodes for WordPress to be by far the most complete and well documented plugin available.

[lead]Lorem ipsum dolor …[/lead]

Grid System

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a aliquam mauris. Praesent blandit iaculis nulla, at porttitor ligula scelerisque ut. Integer laoreet metus et tincidunt facilisis.

Duis hendrerit tempus purus. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum in nunc fermentum laoreet eget vitae nulla.

[row]
  [column md="6"]
    Lorem ipsum dolor …
  [/column]
  [column md="6"]
    Duis hendrerit tempus …
  [/column]
[/row]

Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a aliquam mauris.

Duis hendrerit tempus purus. In hac habitasse platea dictumst.

Curabitur sed ligula purus. Nulla nec orci et lectus semper commodo.

[row]
  [column md="4"]
    Lorem ipsum dolor …
  [/column]
  [column md="4"]
    Duis hendrerit tempus …
  [/column]
  [column md="4"]
    Curabitur sed ligula …
  [/column]
[/row]

Four Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis hendrerit tempus purus. In hac habitasse platea dictumst.

Curabitur sed ligula purus. Nulla nec orci et lectus semper commodo.

Maecenas quam nunc, varius quis quam et, interdum molestie quam.

[row]
  [column md="3"]
    Lorem ipsum dolor …
  [/column]
  [column md="3"]
    Duis hendrerit tempus …
  [/column]
  [column md="3"]
    Curabitur sed ligula …
  [/column]
  [column md="3"]
    Maecenas quam nunc …
  [/column]
[/row]

Twothird Column Split

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a aliquam mauris. Praesent blandit iaculis nulla, at porttitor ligula scelerisque ut.

Curabitur sed ligula purus. Nulla nec orci et lectus semper commodo.

[row]
  [column md="8"]
    Lorem ipsum dolor …
  [/column]
  [column md="4"]
    Curabitur sed ligula …
  [/column]
[/row]

Tables

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

[table-wrap bordered="true" striped="true"]
  Standard HTML table code goes here.
[/table-wrap]

Buttons

Default Primary Success Info Warning Danger

[button type="default" link="#"]Default[/button]
[button type="primary" link="#"]Primary[/button]
[button type="success" link="#"]Success[/button]
[button type="info" link="#"]Info[/button]
[button type="warning" link="#"]Warning[/button]
[button type="danger" link="#"]Danger[/button]

Images

Circle

Rounded

Thumbnail

[img type="circle"]Insert Image Here …[/img]
[img type="rounded"]Insert Image Here …[/img]
[img type="thumbnail"]Insert Image Here …[/img]

Glyphicons

Cloud Envelope Music Film Headphones Flag Leaf

[button link="#"][icon type="cloud"] Cloud[/button]
[button link="#"][icon type="envelope"] Envelope[/button]
[button link="#"][icon type="music"] Music[/button]
[button link="#"][icon type="film"] Film[/button]
[button link="#"][icon type="headphones"] Headphones[/button]
[button link="#"][icon type="flag"] Flag[/button]
[button link="#"][icon type="leaf"] Leaf[/button]

Button Groups

[button-toolbar]
  [button-group]
    [button link="#"]Cut[/button]
    [button link="#"]Copy[/button]
    [button link="#"]Paste[/button]
  [/button-group]
  [button-group]
    [button link="#"]Save[/button]
    [button link="#"]Save As[/button]
    [button link="#"]Revert[/button]
  [/button-group]
  [button-group]
    [button link="#"]Undo[/button]
  [/button-group]
[/button-toolbar]

Button Dropdowns

[button-group]
  [button link="#" dropdown="true" data="toggle,dropdown"]Action [caret][/button]
  [dropdown]
    [dropdown-header]Pick an action[/dropdown-header]
    [dropdown-item link="#"]Action[/dropdown-item]
    [dropdown-item link="#"]Another Action[/dropdown-item]
    [dropdown-item link="#"]Something elese here[/dropdown-item]
    [divider]
    [dropdown-item link="#"]Separated link[/dropdown-item]
  [/dropdown]
[/button-group]

Nav Pills

[nav type="pills"]
  [nav-item link="#" active="true"]Home[/nav-item]
  [nav-item link="#"]Profile[/nav-item]
  [nav-item dropdown="true" link="#"]Dropdown [caret]
    [dropdown]
      [dropdown-item link="#"]Messages[/dropdown-item]
      [dropdown-item link="#"]Notifications[/dropdown-item]
    [/dropdown]
  [/nav-item]
[/nav]

Labels

Default Primary Success Info Warning Danger

[label type="default"]Default[/label]
[label type="primary"]Primary[/label]
[label type="success"]Success[/label]
[label type="info"]Info[/label]
[label type="warning"]Warning[/label]
[label type="danger"]Danger[/label]

Badges

Requests 2 Messages 3 Notifications 5

[button type="default" link="#"]Requests [badge right="false"]2[/badge][/button]
[button type="default" link="#"]Messages [badge right="false"]3[/badge][/button]
[button type="default" link="#"]Notifications [badge right="false"]5[/badge][/button]

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

[jumbotron title="Hello, world!"]
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

[button type="primary" size="lg" link="#"]Learn more[/button]

[/jumbotron]

Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it”s not super important.

Warning! Better check yourself, you”re not looking too good.

Oh snap! Change a few things up and try submitting again.

[alert type="success"]Well done! You successfully read this important alert message[/alert]
[alert type="info"]Heads up! This alert needs your attention, but it''s not super important[/alert]
[alert type="warning"]Warning! Better check yourself, you''re not looking too good[/alert]
[alert type="danger"]Oh snap! Change a few things up and try submitting again[/alert]

Progress Bars

Basic example

[progress]
  [progress-bar percent="60"]
[/progress]

With label

60% Complete

[progress]
  [progress-bar percent="60" label="true"]
[/progress]

Contextual alternatives

[progress]
  [progress-bar percent="40" type="success"]
[/progress]
[progress]
  [progress-bar percent="20" type="info"]
[/progress]
[progress]
  [progress-bar percent="60" type="warning"]
[/progress]
[progress]
  [progress-bar percent="80" type="danger"]
[/progress]

Striped

[progress striped="true"]
  [progress-bar percent="40" type="success"]
[/progress]
[progress striped="true"]
  [progress-bar percent="20" type="info"]
[/progress]
[progress striped="true"]
  [progress-bar percent="60" type="warning"]
[/progress]
[progress striped="true"]
  [progress-bar percent="80" type="danger"]
[/progress]

Animated

[progress striped="true" animated="true"]
  [progress-bar percent="45"]
[/progress]

Stacked

[progress]
  [progress-bar percent="35" type="success"]
  [progress-bar percent="20" type="warning"]
  [progress-bar percent="10" type="danger"]
[/progress]

Media Objects

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

[media]
  [media-object pull="left"]
    Insert Image Here
  [/media-object]
  [media-body title="Media heading"]
    Insert Text Here
  [/media-body]
[/media]

List Groups

Basic Example

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

[list-group]
  [list-group-item]
    Cras justo odio
  [/list-group-item]
  [list-group-item]
    Dapibus ac facilisis in
  [/list-group-item]
  [list-group-item]
    Morbi leo risus
  [/list-group-item]
  [list-group-item]
    Porta ac consectetur ac
  [/list-group-item]
  [list-group-item]
    Vestibulum at eros
  [/list-group-item]
[/list-group]

Linked Items

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

[list-group linked="true"]
  [list-group-item link="#" active="true"]
    Cras justo odio
  [/list-group-item]
  [list-group-item link="#"]
    Dapibus ac facilisis in
  [/list-group-item]
  [list-group-item link="#"]
    Morbi leo risus
  [/list-group-item]
  [list-group-item link="#"]
    Porta ac consectetur ac
  [/list-group-item]
  [list-group-item link="#"]
    Vestibulum at eros
  [/list-group-item]
[/list-group]

Custom Content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

[list-group linked="true"]
  [list-group-item link="#" active="true"]
    [list-group-item-heading]List group item heading[/list-group-item-heading]
    [list-group-item-text]Donec id elit …[/list-group-item-text]
  [/list-group-item]
  [list-group-item link="#"]
    [list-group-item-heading]List group item heading[/list-group-item-heading]
    [list-group-item-text]Donec id elit …[/list-group-item-text]
  [/list-group-item]
  [list-group-item link="#"]
    [list-group-item-heading]List group item heading[/list-group-item-heading]
    [list-group-item-text]Donec id elit …[/list-group-item-text]
  [/list-group-item]
[/list-group]

Panels

Default Panel

Here goes the panel content.

Panel Footer

Primary Panel

Here goes the panel content.

Panel Footer

Success Panel

Here goes the panel content.

Panel Footer

Info Panel

Here goes the panel content.

Panel Footer

Warning Panel

Here goes the panel content.

Panel Footer

Danger Panel

Here goes the panel content.

Panel Footer

[panel type="default" heading="Default Panel" footer="Panel Footer"]Panel content.[/panel]
[panel type="primary" heading="Primary Panel" footer="Panel Footer"]Panel content.[/panel]
[panel type="success" heading="Success Panel" footer="Panel Footer"]Panel content.[/panel]
[panel type="info" heading="Info Panel" footer="Panel Footer"]Panel content.[/panel]
[panel type="warning" heading="Warning Panel" footer="Panel Footer"]Panel content.[/panel]
[panel type="danger" heading="Danger Panel" footer="Panel Footer"]Panel content.[/panel]

Wells

Look, I”m in a well!

[well]Look, I''m in a well![/well]

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a aliquam mauris. Praesent blandit iaculis nulla, at porttitor ligula scelerisque ut. Integer laoreet metus et tincidunt facilisis. Ut ac semper sem, id aliquet nibh. Ut sed tortor faucibus, vestibulum leo et, auctor purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam scelerisque lectus vehicula, sagittis ligula at, consequat enim.

Duis hendrerit tempus purus. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum in nunc fermentum laoreet eget vitae nulla. Ut non rutrum lorem. Suspendisse malesuada, felis at aliquam posuere, augue ipsum lacinia dui, in viverra nibh nisl sit amet urna. Cras viverra pulvinar odio, sed vestibulum ligula commodo ac. Vestibulum venenatis sed nisi sed lacinia.

Curabitur sed ligula purus. Nulla nec orci et lectus semper commodo. Morbi ultricies magna adipiscing accumsan tincidunt. Phasellus molestie libero eros, malesuada tempus velit porta vel. Suspendisse at gravida erat. Phasellus nec urna eget urna tempor tincidunt. Duis et consequat mi, tempus cursus arcu. Nunc felis magna, adipiscing vitae dolor in, luctus laoreet augue. Sed mollis imperdiet enim. Donec vel tristique lacus.

[tabs type="tabs"]
  [tab title="Home" active="true"]
    Lorem ipsum dolor …
  [/tab]
  [tab title="Profile"]
    Duis hendrerit tempus  …
  [/tab]
  [tab title="Messages"]
    Curabitur sed ligula …
  [/tab]
[/tabs]

Tooltip

[tooltip xclass="btn btn-default" title="The tooltip" placement="left"]Tooltip left[/tooltip]
[tooltip xclass="btn btn-default" title="The tooltip" placement="top"]Tooltip top[/tooltip]
[tooltip xclass="btn btn-default" title="The tooltip" placement="bottom"]Tooltip bottom[/tooltip]
[tooltip xclass="btn btn-default" title="The tooltip" placement="right"]Tooltip right[/tooltip]

Popover

[popover title="Popover title" text="And here''s some amazing content. It''s very engaging. right?" placement="right"]Click to toggle popover[/popover]

[collapsibles]
  [collapse title="Collapse 1" active="true"]
    Lorem ipsum dolor …
  [/collapse]
  [collapse title="Collapse 2"]
    Duis hendrerit tempus …
  [/collapse]
  [collapse title="Collapse 3"]
    Curabitur sed ligula …
  [/collapse]
[/collapsibles]

Carousel

[carousel]
  [carousel-item active="true"]Insert Image Here[/carousel-item]
  [carousel-item]Insert Image Here[/carousel-item]
  [carousel-item]Insert Image Here[/carousel-item]
[/carousel]

Modal

Click to Open

[modal text="Click to Open" title="This is my modal" xclass="btn btn-primary btn-large"]
  Lorem ipsum dolor …
  [modal-footer]
    [button type="primary" link="#" data="dismiss,modal"]Dismiss[/button]
  [/modal-footer]
[/modal]