Shortcodes

Bootstrap Columns

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Span1+Span11

Curabitur lobortis dolor id metus.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span2+Span10

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span3+Span9

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span4+Span8

Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span5+Span7

Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span6+Span6

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span7+Span5

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.

Span8+Span4

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.

Span9+Span3

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam.

Span10+Span2

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est.

Span11+Span1

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Curabitur lobortis dolor id metus.
[row][spanX]content here[/spanX][/row] Where spanX – span1…span12

Buttons

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button Shortcode Description
[button style='1' caption='Default' link='button url'][/button] Standard gray button with gradient
[button style='2' caption='Primary' link='button url'][/button] Provides extra visual weight and identifies the primary action in a set of buttons
[button style='3' caption='Info' link='button url'][/button] Used as an alternative to the default styles
[button style='4' caption='Success' link='button url'][/button] Indicates a successful or positive action
[button style='5' caption='Warning' link='button url'][/button] Indicates caution should be taken with this action
[button style='6' caption='Danger' link='button url'][/button] Indicates a dangerous or potentially negative action
[button style='7' caption='Inverse' link='button url'][/button] Alternate dark gray button, not tied to a semantic action or use
[button style='8' caption='Link' link='button url'][/button] Deemphasize a button by making it look like a link while maintaining button behavior

Headings

All HTML headings, <h1> through <h6> are available.

Example H1

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Example H2

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Example H3

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Example H4

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Example H5

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Example H6

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam. Vivamus adipiscing, felis sed euismod ultricies, enim ante rutrum odio, et aliquet orci enim sed sapien. Vestibulum nec diam turpis, et bibendum risus. Aliquam interdum tincidunt orci. Curabitur id metus non est venenatis adipiscing. Aenean ultrices adipiscing lectus at iaculis. Nullam mollis arcu vitae erat dapibus pulvinar. Integer porttitor, dui eu vestibulum venenatis, risus orci molestie neque, ut aliquam quam elit sit amet enim.

Lists

Unordered List
  • Item One
  • Item Two
  • Item Three
[list style="1" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Ordered List
  • Item One
  • Item Two
  • Item Three
[list style="2" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Square List
  • Item One
  • Item Two
  • Item Three
[list style="3" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Circle List
  • Item One
  • Item Two
  • Item Three
[list style="4" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Bullet List
  • Item One
  • Item Two
  • Item Three
[list style="5" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Unordered List Underline
  • Item One
  • Item Two
  • Item Three
[list style="1" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Ordered List Underline
  • Item One
  • Item Two
  • Item Three
[list style="2" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Square List Underline
  • Item One
  • Item Two
  • Item Three
[list style="3" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Circle List Underline
  • Item One
  • Item Two
  • Item Three
[list style="4" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Bullet List Underline
  • Item One
  • Item Two
  • Item Three
[list style="5" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Bootstrap Elements

Font Awesome Icons

249 icons Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen


icon_name: glass

icon_name: heart

icon_name: film

icon_name: ok

[icon icon_name='bootstrap icon name']Name for icons here after icon-

Badges

1

2
3
4
5
6
[badge style='1..6']content here[/badge]

Labels

label #1

label #2
label #3
label #4
label #5
label #6
[label style='1..6']content here[/label]

Alerts

Alert Error
Alert Success
Alert Information
[alert style='1..3']content here[/alert]

Progress Bars

[progress percent="Bar Percent" style='1..4']

Additional Bootstrap Features

Pricing table example

Silver

POPULAR

  • 10 users
  • Unlimited access
  • 3TB of space
  • E-mail support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$15.99 / month


Select plan

Bronze

POPULAR

  • 20 users
  • Unlimited access with no limits
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$10.99 / month


Select plan

Economy

BUDGET

  • 10 users
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$8.99 / month


Select plan

<div class="span3">
	<div class="well">
		<h2 class="muted">Silver</h2>
		<p><span class="label">POPULAR</span></p>
		<ul>
			<li>10 users</li>
			<li>Unlimited access</li>
			<li>3TB of space</li>
			<li>E-mail support</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$15.99 / month</h3>
		<hr>
		<p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-warning">Bronze</h2>
		<p><span class="label label-success">POPULAR</span></p>
		<ul>
			<li>20 users</li>
			<li>Unlimited access with no limits</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$10.99 / month</h3>
		<hr>
		<p><a class="btn btn-success btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-info">Economy</h2>
		<p><span class="label label-info">BUDGET</span></p>
		<ul>
			<li>10 users</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$8.99 / month</h3>
		<hr>
      <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>


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

<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

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

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

With borders and rounded corners
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Enable a hover state on table rows
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Color table rows
# Product Payment Taken Status
1 TB – Monthly 01/04/2012 Approved
2 TB – Monthly 02/04/2012 Declined
3 TB – Monthly 03/04/2012 Pending
4 TB – Monthly 04/04/2012 Call in to confirm

<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>

Condensed table example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active

<div class="span5">
<table class="table table-striped table-condensed">
	  <thead>
      <tr>
          <th>Username</th>
          <th>Date registered</th>
          <th>Role</th>
          <th>Status</th>                                          
      </tr>
  </thead>   
  <tbody>
    <tr>
        <td>Donna R. Folse</td>
        <td class="center">2012/05/06</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                       
    </tr>
    <tr>
        <td>Emily F. Burns</td>
        <td class="center">2011/12/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-important">Banned</span>
        </td>                                       
    </tr>
    <tr>
        <td>Andrew A. Stout</td>
        <td class="center">2010/08/21</td>
        <td class="center">User</td>
        <td class="center">
            <span class="label">Inactive</span>
        </td>                                        
    </tr>
    <tr>
        <td>Mary M. Bryan</td>
        <td class="center">2009/04/11</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-warning">Pending</span>
        </td>                                       
    </tr>
    <tr>
        <td>Mary A. Lewis</td>
        <td class="center">2007/02/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                        
    </tr>                                   
  </tbody>
</table>
</div>

Stats example

Vital Stats 1268
  • 36% Clicks 167

  • 52% Uniquie Clicks 77

  • 93% Impressions 157

  • 5% Online Users 8

<div class="span4">
	<h4>Vital Stats  <span class="label label-success pull-right">1268</span></h4>
	<ul class="unstyled">
	    <li>
	        36% Clicks <span class="pull-right strong">167</span>
	        <div class="progress progress-striped ">
	            <div class="bar" style="width: 36%;"></div>
	        </div>
	    </li>
	    <li>52% Uniquie Clicks <span class="pull-right strong">77</span>
	        <div class="progress progress-success progress-striped ">
	            <div class="bar" style="width: 52%;"></div>
	        </div>
	    </li>
	    <li>93% Impressions <span class="pull-right strong">157</span>
	        <div class="progress progress-warning progress-striped ">
	            <div class="bar" style="width: 93%;"></div>
	        </div>
	    </li>
	    <li>5% Online Users <span class="pull-right strong">8</span>
	        <div class="progress progress-danger progress-striped ">
	            <div class="bar" style="width: 5%;"></div>
	        </div>
	    </li>
	</ul>
</div>

Togglable tabs

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

<div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">Section</a></li>
              <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
              <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p class="last">Donec venenatis blandit consequat. Vivamus placerat condimentum ligula, adipiscing luctus dolor adipiscing non. Suspendisse dictum porta lorem, ac iaculis nisl porttitor at.</p>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab2">
                <ul class="nav nav-list">
          		  <li class="nav-header">List header</li>
          		  <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          		  <li><a href="#"><i class="icon-book"></i> Library</a></li>
          		  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
          		  <li class="nav-header">Another list header</li>
          		  <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          		  <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          		  <li class="divider"></li>
          		  <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        		</ul>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab3">
                <ul class="tags clearfix">
      	    	  <li><a href="#">quote</a></li>
	        	  <li><a href="#">copyright</a></li>
	        	  <li><a href="#">brand</a></li>
	        	  <li><a href="#">tag</a></li>
	        	  <li><a href="#">design</a></li>
	        	  <li><a href="#">graphics</a></li>
	        	  <li><a href="#">battle</a></li>
	        	  <li><a href="#">envato</a></li>
		  		</ul>
              </div><!-- tab-pane -->
            </div><!-- tab-content -->
          </div><!-- tabbable -->