Today is Tuesday, Dec 25, 2012 5:30pm
Using 16.8 GB of your 51.7 GB
38% full

Bootstrap Components

This is a sample description for dashboard page...

Dropdown Menu View Source

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Action</a></li>
       ...
       <li class="divider"></li>
       ...
</ul>

Single Button Group View Source

<div class="btn-group">
       <button class="btn">1</button>
       <button class="btn">2</button>
       <button class="btn">3</button>
    </div>
<div class="btn-toolbar">
       <div class="btn-group"> ... </div>
       <div class="btn-group"> ... </div>
    </div>
<div class="btn-group btn-group-vertical"> ... </div>

Basic Tabs View Source

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">...</a></li>
   ...
</ul>

Basic Pills View Source

<ul class="nav nav-pills">
   ...
</ul>

Stacked Tabs View Source

Stacked Pills View Source

Tabbable In Any Direction View Source

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-below"><!--remove tabs-below for top-->
  <div class="tab-content">
    <div id="A" class="tab-pane"> ... </div>
    ...
</div> <ul class="nav nav-tabs"> <li class=""><a data-toggle="tab" href="#A">Section 1</a></li> ... </ul>
</div>
<div class="tabbable tabs-right"><!-- change tabs-left for left-->
  <ul class="nav nav-tabs">
    <li class=""><a data-toggle="tab" href="#A">Section 1</a></li>
    ...
  </ul>
  <div class="tab-content">
    <div id="A" class="tab-pane"> ... </div>
    ...
</div>
</div>

Pagination View Source

<div class="pagination">
  <ul>
    <li class="disabled"><a>Previous</a></li>
<li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> ... </ul> </div>
<div class="pagination pagination-large">
  <ul> ... </ul>
</div>
<div class="pagination pagination-mini">
  <ul> ... </ul>
</div>
<div class="pagination pagination-centered">
  <ul> ... </ul>
</div>
<div class="pagination pagination-right">
  <ul> ... </ul>
</div>

Pager View Source

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
  <li class="previous"><a href="#"><span>&larr;</span> Older</a></li>
  <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
</ul>
<ul class="pager">
  <li class="previous disabled"><a href="#"><span>&larr;</span> Older</a></li>
  <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
</ul>

Progress Bars View Source

<div class="progress">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped">
<div class="progress progress-striped active">
<div class="progress progress-info">
<div class="progress progress-success">
<div class="progress progress-warning progress-striped">
<div class="progress progress-danger progress-striped active">

Button Dropdowns

Nav List View Source

<ul class="nav nav-list">
   <li class="nav-header">List Header</li>
   <li class="active"><a href="#">Home</a></li>
   ...
</ul>

Basic Navbar View Source

<div class="navbar">
  <div class="navbar-inner">
    <a href="#" class="brand">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown"> ... </li>
    </ul>
  </div>
</div>
<div class="navbar">
  <div class="navbar-inner">
    <form class="navbar-search pull-left">
      <input type="text" class="search-query">
    </form>
  </div>
</div>
<form class="navbar-form pull-right">
  <input type="text" class="span2">
  <button class="btn" type="submit">Submit</button>
</form>

Inversed Navbar View Source

<div class="navbar navbar-inverse">
  ...
</div>

Breadcrumbs View Source

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li class="active">Library</li>
</ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Modal Window View Source

Launch demo modal
<a href="#myModal" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal">
   <div class="modal-header">
      <button aria-hidden="true" data-dismiss="modal" class="close">×</button>
      <h3>Modal header</h3>
   </div>
   <div class="modal-body">
      ...
   </div>
   <div class="modal-footer">
      <a class="btn" href="#">Close</a>
      <a class="btn btn-primary" href="#">Save changes</a>
   </div>
</div>

Tooltip

Popover