Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Components
Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
Nav, tabs, and pills Highly customizable list-style navigation
Lightweight defaults Same markup, different classes
Powerful base class
All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
Why tabs and pills
Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.
Both options are great for sub-sections of content or navigating between pages of related content.
Basic tabs
Take a regular <ul> of links and add .tabs:
<ul class="nav tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Basic pills
Take that same HTML, but use .pills instead:
<ul class="nav pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Stackable Make tabs or pills vertical
How to stack 'em
As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.
Stacked tabs
<ul class="nav tabs stacked"> ... </ul>
Stacked pills
<ul class="nav pills stacked"> ... </ul>
Dropdowns For advanced nav components
Rich menus made easy
Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.
Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.
Tabs with dropdowns
<ul class="nav tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Pills with dropdowns
<ul class="nav pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Nav lists Build simple stacked navs, great for sidebars
Application-style navigation
Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
With icons
Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.
Example nav list
Take a list of links and add class="nav list":
<ul class="nav list">
<li class="nav-header">
List header
</li>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
...
</ul>
Example with icons
Same example, but with <i> tags for icons.
<ul class="nav list">
...
<li>
<a href="#">
<i class="book"></i>
Library
</a>
</li>
...
</ul>
Tabbable nav Bring tabs to life via javascript
What's included
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.
Changing between them is easy and only requires changing very little markup.
Tabbable example
To make tabs tabbable, wrap the .tabs in another div with class .tabbable.
I'm in Section 1.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
Custom jQuery plugin
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
Straightforward markup
Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.
<div class="tabbable">
<ul class="nav tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li><a href="#2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Tabbable in any direction
Tabs on the bottom
Flip the order of the HTML and add a class to put tabs on the bottom.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-bottom">
<ul class="nav tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Tabs on the left
Swap the class to put tabs on the left.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-left">
<ul class="nav tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Tabs on the right
Swap the class to put tabs on the right.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-right">
<ul class="nav tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Pagination
Pagination
Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">Next →</a></li>
</ul>
</div>
Thumbnails Grids of images, videos, text, and more
Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Why use thumbnails
Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
Simple, flexible markup
Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.
The markup
As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
...
</ul>
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here...</p>
</div>
</li>
...
</ul>
More examples
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
Alerts & Errors Styles for success, warning, and error messages or alerts
Basic alerts
.alert-message
One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.
Example code
<div class="alert-message warning"> <a class="close" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div>
Block messages
<div class="alert-message block-message">
For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.
Example code
<div class="alert-message block-message warning">
<a class="close" href="#">×</a>
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
Modals
Modals
Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
×
Modal Heading
One fine body…
Twipsy tooltips
Tooltips
Twipsies are super useful for aiding a confused user and pointing them in the right direction.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Popovers
Popovers
Use popovers to provide subtextual information to a page without affecting layout.
Popover Title
Progress bars For loading, redirecting, or action status
Examples and markup
Basic
Default progress bar with a vertical gradient.
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
Striped
Uses a gradient to create a striped effect.
<div class="progress info
striped">
<div class="bar"
style="width: 20%;"></div>
</div>
Animated
Takes the striped example and animates it.
<div class="progress danger
striped active">
<div class="bar"
style="width: 40%;"></div>
</div>
Options and browser support
Additional colors
Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
.info.success.danger
Alternatively, you can customize the LESS files and roll your own colors and sizes.
Behavior
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
If you use the .active class, your .striped progress bars will animate the stripes left to right.
Browser support
Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.
Opera does not support animations at this time.