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

[row][span1]Curabitur lobortis dolor id metus.[/span1][span11]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.[/span11][/row][clear][divider_1px]

Span2+Span10

[row][span2]Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.[/span2][span10]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.[/span10][/row][clear][divider_1px]

Span3+Span9

[row][span3]Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.[/span3][span9]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.[/span9][/row]
[clear][divider_1px]

Span4+Span8

[row][span4]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.[/span4][span8]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.[/span8][/row][clear][divider_1px]

Span5+Span7

[row][span5]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.[/span5][span7]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][/row][clear][divider_1px]

Span6+Span6

[row][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.[/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.[/span6][/row][clear][divider_1px]

Span7+Span5

[row][span7]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]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.[/span5][/row][clear][divider_1px]

Span8+Span4

[row][span8]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.[/span8][span4]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.[/span4][/row][clear][divider_1px]

Span9+Span3

[row][span9]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.[/span9][span3]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.[/span3][/row][clear][divider_1px]

Span10+Span2

[row][span10]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.[/span10][span2]Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est.[/span2][/row][clear][divider_1px]

Span11+Span1

[row][span11]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.[/span11][span1]Curabitur lobortis dolor id metus.[/span1][/row][clear][divider_1px][margin_15b][row][span12][collapse collapseid=”bootcol1″ title=”Code”][row][spanX]content here[/spanX][/row] Where spanX – span1…span12[/collapse][/span12][/row]

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.

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

[row][span6]

Unordered List

[list style=”1″ underline=”0″]

[/list][collapse collapseid=”list1″ title=”Get Code”][list style="1" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][span6]

Ordered List

[list style=”2″ underline=”0″]

[/list][collapse collapseid=”list2″ title=”Get Code”][list style="2" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][/row][clear][margin_15b][divider_1px]
[row][span6]

Square List

[list style=”3″ underline=”0″]

[/list][collapse collapseid=”list3″ title=”Get Code”][list style="3" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][span6]

Circle List

[list style=”4″ underline=”0″]

[/list][collapse collapseid=”list4″ title=”Get Code”][list style="4" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][/row][clear][margin_15b][divider_1px]
[row][span6]

Bullet List

[list style=”5″ underline=”0″]

[/list][collapse collapseid=”list5″ title=”Get Code”][list style="5" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][span6]

Unordered List Underline

[list style=”1″ underline=”1″]

[/list][collapse collapseid=”list6″ title=”Get Code”][list style="1" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][/row][clear][margin_15b][divider_1px]
[row][span6]

Ordered List Underline

[list style=”2″ underline=”1″]

[/list][collapse collapseid=”list7″ title=”Get Code”][list style="2" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][span6]

Square List Underline

[list style=”3″ underline=”1″]

[/list][collapse collapseid=”list8″ title=”Get Code”][list style="3" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][/row][clear][margin_15b][divider_1px]
[row][span6]

Circle List Underline

[list style=”4″ underline=”1″]

[/list][collapse collapseid=”list9″ title=”Get Code”][list style="4" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][span6]

Bullet List Underline

[list style=”5″ underline=”1″]

[/list][collapse collapseid=”list10″ title=”Get Code”][list style="5" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list][/collapse][/span6][/row]

Bootstrap Elements

[row][span12]

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

[/span12][/row]
[row][span3]

icon_name: glass

[icon icon_name=”glass”][/span3][span3]

icon_name: heart

[icon icon_name=”heart”][/span3][span3]

icon_name: film

[icon icon_name=”film”][/span3][span3]

icon_name: ok

[icon icon_name=”ok”][/span3][/row][collapse title=”Get Code For All Icons” collapseid=”elements1″][icon icon_name='bootstrap icon name']Name for icons here after icon-[/collapse][clear][margin_30b]

Badges

[badge style=”1″]1[/badge][clear][margin_5b][badge style=”2″]2[/badge][clear][margin_5b][badge style=”3″]3[/badge][clear][margin_5b][badge style=”4″]4[/badge][clear][margin_5b][badge style=”5″]5[/badge][clear][margin_5b][badge style=”6″]6[/badge][clear][margin_30b][collapse title=”Get Code For All Badges” collapseid=”elements2″][badge style='1..6']content here[/badge][/collapse][clear][margin_30b]

Labels

[label style=”1″]label #1[/label][clear][margin_5b][label style=”2″]label #2[/label][clear][margin_5b][label style=”3″]label #3[/label][clear][margin_5b][label style=”4″]label #4[/label][clear][margin_5b][label style=”5″]label #5[/label][clear][margin_5b][label style=”6″]label #6[/label][clear][margin_30b][collapse collapseid=”elements3″ title=”Get Code For All Labels”][label style='1..6']content here[/label][/collapse][clear][margin_30b]

Alerts

[alert style=”1″]Alert Error[/alert][alert style=”2″]Alert Success[/alert][alert style=”3″]Alert Information[/alert][clear][margin_30b][collapse collapseid=”elements4″ title=”Get Code For All Alerts”][alert style='1..3']content here[/alert][/collapse][clear][margin_30b]

Progress Bars

[progress percent=”30″ style=”1″][clear][progress percent=”45″ style=”2″][clear][progress percent=”50″ style=”3″][clear][progress percent=”75″ style=”4″][clear][margin_30b][collapse collapseid=”elements5″ title=”Get Code For All Bars”][progress percent="Bar Percent" style='1..4'][/collapse]

Additional Bootstrap Features

Pricing table example

[row]

[/row]
[collapse title=”Get HTML Code” collapseid=”bootstrap01″]

<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>

[/collapse]

[margin_50t]

Tables

Default styles

[collapse title=”Get HTML Code” collapseid=”bootstrap02″]

<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>

[/collapse]

With zebra-striping

[collapse title=”Get HTML Code” collapseid=”bootstrap03″]

<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>

[/collapse]

With borders and rounded corners

[collapse title=”Get HTML Code” collapseid=”bootstrap04″]

<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>

[/collapse]

Enable a hover state on table rows

[collapse title=”Get HTML Code” collapseid=”bootstrap05″]

<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>

[/collapse]

Color table rows

[collapse title=”Get HTML Code” collapseid=”bootstrap06″]

<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>

[/collapse]

Condensed table example

[collapse title=”Get HTML Code” collapseid=”bootstrap07″]

<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>

[/collapse]
[margin_50t]

Stats example

[row]

[/row]
[collapse title=”Get HTML Code” collapseid=”bootstrap08″]

<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>

[/collapse]
[margin_50t]

Togglable tabs

[row]

[/row]
[collapse title=”Get HTML Code” collapseid=”bootstrap09″]

<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 -->

[/collapse]