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