{{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}
{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.{{/i}}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
{{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then just create the menu.{{/i}}
<div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </div>
{{_i}}Align menus to the right and add include additional levels of dropdowns.{{/i}}
{{_i}}Add .pull-right
to a .dropdown-menu
to right align the dropdown menu.{{/i}}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul>
{{_i}}Add .disabled
to a <li>
in the dropdown to disable the link.{{/i}}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li> <li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li> </ul>
{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu
to any li
in an existing dropdown menu for automatic styling.{{/i}}
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... <li class="dropdown-submenu"> <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a> <ul class="dropdown-menu"> ... </ul> </li> </ul>
{{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><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="#">Next</a></li> </ul> </div>
{{_i}}Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the current page.{{/i}}
<div class="pagination"> <ul> <li class="disabled"><a href="#">Prev</a></li> <li class="active"><a href="#">1</a></li> ... </ul> </div>
{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}
<div class="pagination"> <ul> <li class="disabled"><span>Prev</span></li> <li class="active"><span>1</span></li> ... </ul> </div>
{{_i}}Fancy larger or smaller pagination? Add .pagination-large
, .pagination-small
, or .pagination-mini
for additional sizes.{{/i}}
<div class="pagination pagination-large"> <ul> ... </ul> </div> <div class="pagination"> <ul> ... </ul> </div> <div class="pagination pagination-small"> <ul> ... </ul> </div> <div class="pagination pagination-mini"> <ul> ... </ul> </div>
{{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered
and .pagination-right
.{{/i}}
<div class="pagination pagination-centered"> ... </div>
<div class="pagination pagination-right"> ... </div>
{{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}
{{_i}}By default, the pager centers links.{{/i}}
<ul class="pager"> <li><a href="#">{{_i}}Previous{{/i}}</a></li> <li><a href="#">{{_i}}Next{{/i}}</a></li> </ul>
{{_i}}Alternatively, you can align each link to the sides:{{/i}}
<ul class="pager"> <li class="previous"> <a href="#">{{_i}}← Older{{/i}}</a> </li> <li class="next"> <a href="#">{{_i}}Newer →{{/i}}</a> </li> </ul>
{{_i}}Pager links also use the general .disabled
utility class from the pagination.{{/i}}
<ul class="pager"> <li class="previous disabled"> <a href="#">{{_i}}← Older{{/i}}</a> </li> ... </ul>
{{_i}}Labels{{/i}} | {{_i}}Markup{{/i}} |
---|---|
{{_i}}Default{{/i}} |
<span class="label">{{_i}}Default{{/i}}</span>
|
{{_i}}Success{{/i}} |
<span class="label label-success">{{_i}}Success{{/i}}</span>
|
{{_i}}Warning{{/i}} |
<span class="label label-warning">{{_i}}Warning{{/i}}</span>
|
{{_i}}Important{{/i}} |
<span class="label label-important">{{_i}}Important{{/i}}</span>
|
{{_i}}Info{{/i}} |
<span class="label label-info">{{_i}}Info{{/i}}</span>
|
{{_i}}Inverse{{/i}} |
<span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
|
{{_i}}Name{{/i}} | {{_i}}Example{{/i}} | {{_i}}Markup{{/i}} |
---|---|---|
{{_i}}Default{{/i}} | 1 |
<span class="badge">1</span>
|
{{_i}}Success{{/i}} | 2 |
<span class="badge badge-success">2</span>
|
{{_i}}Warning{{/i}} | 4 |
<span class="badge badge-warning">4</span>
|
{{_i}}Important{{/i}} | 6 |
<span class="badge badge-important">6</span>
|
{{_i}}Info{{/i}} | 8 |
<span class="badge badge-info">8</span>
|
{{_i}}Inverse{{/i}} | 10 |
<span class="badge badge-inverse">10</span>
|
{{_i}}For easy implementation, labels and badges will simply collapse (via CSS's :empty
selector) when no content exists within.{{/i}}
{{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}
{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}
<div class="hero-unit"> <h1>{{_i}}Heading{{/i}}</h1> <p>{{_i}}Tagline{{/i}}</p> <p> <a class="btn btn-primary btn-large"> {{_i}}Learn more{{/i}} </a> </p> </div>
{{_i}}A simple shell for an h1
to appropriately space out and segment sections of content on a page. It can utilize the h1
's default small
, element as well most other components (with additional styles).{{/i}}
<div class="page-header"> <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1> </div>
{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
{{_i}}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.{{/i}}
{{_i}}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.{{/i}}
{{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2
or .span3
—for control of thumbnail dimensions.{{/i}}
{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}
<ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> ... </ul>
{{_i}}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:{{/i}}
<ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt=""> <h3>{{_i}}Thumbnail label{{/i}}</h3> <p>{{_i}}Thumbnail caption...{{/i}}</p> </div> </li> ... </ul>
{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}
{{_i}}Wrap any text and an optional dismiss button in .alert
for a basic warning alert message.{{/i}}
<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} </div>
{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert"
attribute, require an href="#"
for the dismissal of alerts when using an <a>
tag.{{/i}}
<a href="#" class="close" data-dismiss="alert">×</a>
{{_i}}Alternatively, you may use a <button>
element with the data attribute, which we have opted to do for our docs. When using <button>
, you must include type="button"
or your forms may not submit.{{/i}}
<button type="button" class="close" data-dismiss="alert">×</button>
{{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}
{{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block
.{{/i}}
{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>{{_i}}Warning!{{/i}}</h4> {{_i}}Best check yo self, you're not...{{/i}} </div>
{{_i}}Add optional classes to change an alert's connotation.{{/i}}
<div class="alert alert-error"> ... </div>
<div class="alert alert-success"> ... </div>
<div class="alert alert-info"> ... </div>
{{_i}}Default progress bar with a vertical gradient.{{/i}}
<div class="progress"> <div class="bar" style="width: 60%;"></div> </div>
{{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}
<div class="progress progress-striped"> <div class="bar" style="width: 20%;"></div> </div>
{{_i}}Add .active
to .progress-striped
to animate the stripes right to left. Not available in all versions of IE.{{/i}}
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>
Place multiple bars into the same .progress
to stack them.
<div class="progress"> <div class="bar bar-success" style="width: 35%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div> </div>
{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}
<div class="progress progress-info"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger"> <div class="bar" style="width: 80%"></div> </div>
{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}
<div class="progress progress-info progress-striped"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success progress-striped"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning progress-striped"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger progress-striped"> <div class="bar" style="width: 80%"></div> </div>
{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}
{{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}
{{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}
{{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> ... <!-- Nested media object --> <div class="media"> ... </div> </div> </div>
{{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> ... <!-- Nested media object --> <div class="media"> ... </div> </div> </li> </ul>
{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}
<div class="well"> ... </div>
{{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}
<div class="well well-large"> ... </div>
<div class="well well-small"> ... </div>
{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}
<button class="close">×</button>
{{_i}}iOS devices require an href="#"
for click events if you would rather use an anchor.{{/i}}
<a class="close" href="#">×</a>
{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}
{{_i}}Float an element left{{/i}}
class="pull-left"
.pull-left { float: left; }
{{_i}}Float an element right{{/i}}
class="pull-right"
.pull-right { float: right; }
{{_i}}Change an element's color to #999
{{/i}}
class="muted"
.muted { color: #999; }
{{_i}}Clear the float
on any element{{/i}}
class="clearfix"
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } }