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

Get HTML Code

<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
Get HTML Code

<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
Get HTML Code

<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
Get HTML Code

<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
Get HTML Code

<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
Get HTML Code

<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
Get HTML Code

<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

Get HTML Code

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

Get HTML Code

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