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
Span2+Span10
Span3+Span9
[divider_1px]
Span4+Span8
Span5+Span7
Span6+Span6
Span7+Span5
Span8+Span4
Span9+Span3
Span10+Span2
Span11+Span1
[row][spanX]content here[/spanX][/row]
Where spanX — span1…span12[/collapse]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
[list style=»1″ underline=»0″]
[/list][collapse collapseid=»list1″ title=»Get Code»][list style="1" underline="0"]
[/collapse]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]
Ordered List
[list style=»2″ underline=»0″]
[/list][collapse collapseid=»list2″ title=»Get Code»][list style="2" underline="0"]
[/collapse]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]
Square List
[list style=»3″ underline=»0″]
[/list][collapse collapseid=»list3″ title=»Get Code»][list style="3" underline="0"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Circle List
[list style=»4″ underline=»0″]
[/list][collapse collapseid=»list4″ title=»Get Code»][list style="4" underline="0"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Bullet List
[list style=»5″ underline=»0″]
[/list][collapse collapseid=»list5″ title=»Get Code»][list style="5" underline="0"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Unordered List Underline
[list style=»1″ underline=»1″]
[/list][collapse collapseid=»list6″ title=»Get Code»][list style="1" underline="1"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Ordered List Underline
[list style=»2″ underline=»1″]
[/list][collapse collapseid=»list7″ title=»Get Code»][list style="2" underline="1"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Square List Underline
[list style=»3″ underline=»1″]
[/list][collapse collapseid=»list8″ title=»Get Code»][list style="3" underline="1"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Circle List Underline
[list style=»4″ underline=»1″]
[/list][collapse collapseid=»list9″ title=»Get Code»][list style="4" underline="1"]<li>Item One</li>
[/collapse]
<li>Item Two</li>
<li>Item Three</li>
[/list]
Bullet List Underline
[list style=»5″ underline=»1″]
[/list][collapse collapseid=»list10″ title=»Get Code»][list style="5" underline="1"]<li>Item One</li>
[/collapse]
<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_name: glass
[icon icon_name=»glass»]
icon_name: heart
[icon icon_name=»heart»]
icon_name: film
[icon icon_name=»film»]
icon_name: ok
[icon icon_name=»ok»] [collapse title=»Get Code For All Icons» collapseid=»elements1″][icon icon_name='bootstrap icon name']
Name for icons here after icon-[/collapse]
Badges
1
[margin_5b]2[margin_5b]3[margin_5b]4[margin_5b]5[margin_5b]6[margin_30b][collapse title=»Get Code For All Badges» collapseid=»elements2″][badge style='1..6']content here[/badge]
[/collapse][margin_30b]
Labels
label #1
[margin_5b]label #2[margin_5b]label #3[margin_5b]label #4[margin_5b]label #5[margin_5b]label #6[margin_30b][collapse collapseid=»elements3″ title=»Get Code For All Labels»][label style='1..6']content here[/label]
[/collapse][margin_30b]
Alerts
[alert style='1..3']content here[/alert]
[/collapse][margin_30b]
Progress Bars
[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
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
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
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
[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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
[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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
[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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
[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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
[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
# | 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 |
[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
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 |
[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
Vital Stats 1268
-
36% Clicks 167
- 52% Uniquie Clicks 77
- 93% Impressions 157
- 5% Online Users 8
[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
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.
[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]