{{_i}}Components{{/i}}

{{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}

{{_i}}Button groups{{/i}}

{{_i}}Examples{{/i}}

{{_i}}Two basic options, along with two more specific variations.{{/i}}

{{_i}}Single button group{{/i}}

{{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

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

{{_i}}Multiple button groups{{/i}}

{{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

{{_i}}Vertical button groups{{/i}}

{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

<div class="btn-group btn-group-vertical">
  ...
</div>

{{_i}}Checkbox and radio flavors{{/i}}

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

{{_i}}Dropdowns in button groups{{/i}}

{{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

{{_i}}Button dropdown menus{{/i}}

{{_i}}Overview and examples{{/i}}

{{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

{{! /example }} 
<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    {{_i}}Action{{/i}}
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- {{_i}}dropdown menu links{{/i}} -->
  </ul>
</div>

{{_i}}Works with all button sizes{{/i}}

{{_i}}Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.{{/i}}

{{! /example }}

{{_i}}Requires javascript{{/i}}

{{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

{{_i}}Split button dropdowns{{/i}}

{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

{{! /example }} 
<div class="btn-group">
  <button class="btn">{{_i}}Action{{/i}}</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- {{_i}}dropdown menu links{{/i}} -->
  </ul>
</div>

{{_i}}Sizes{{/i}}

{{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

{{! /example }} 
<div class="btn-group">
  <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- {{_i}}dropdown menu links{{/i}} -->
  </ul>
</div>

{{_i}}Dropup menus{{/i}}

{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

{{! /example }} 
<div class="btn-group dropup">
  <button class="btn">{{_i}}Dropup{{/i}}</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- {{_i}}dropdown menu links{{/i}} -->
  </ul>
</div>

{{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

{{_i}}Standard pagination{{/i}}

{{_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}}Options{{/i}}

{{_i}}Disabled and active states{{/i}}

{{_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}}Alignment{{/i}}

{{_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}}Pager{{/i}}

{{_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}}Default example{{/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}}Aligned links{{/i}}

{{_i}}Alternatively, you can align each link to the sides:{{/i}}

<ul class="pager">
  <li class="previous">
    <a href="#">{{_i}}&larr; Older{{/i}}</a>
  </li>
  <li class="next">
    <a href="#">{{_i}}Newer &rarr;{{/i}}</a>
  </li>
</ul>

{{_i}}Optional disabled state{{/i}}

{{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

<ul class="pager">
  <li class="previous disabled">
    <a href="#">{{_i}}&larr; Older{{/i}}</a>
  </li>
  ...
</ul>

{{_i}}Labels and badges{{/i}}

{{_i}}Labels{{/i}}

{{_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}}Badges{{/i}}

{{_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}}Typographic components{{/i}}

{{_i}}Hero unit{{/i}}

{{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

{{_i}}Hello, world!{{/i}}

{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

{{_i}}Learn more{{/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}}Page header{{/i}}

{{_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}}

{{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

<div class="page-header">
  <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
</div>

{{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

{{_i}}Default thumbnails{{/i}}

{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

{{_i}}Highly customizable{{/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}}Thumbnail label{{/i}}

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

  • {{_i}}Thumbnail label{{/i}}

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

  • {{_i}}Thumbnail label{{/i}}

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

{{_i}}Why use 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}}Simple, flexible markup{{/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}}Uses grid column sizes{{/i}}

{{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

{{_i}}Markup{{/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 src="http://placehold.it/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 src="http://placehold.it/300x200" alt="">
      <h3>{{_i}}Thumbnail label{{/i}}</h3>
      <p>{{_i}}Thumbnail caption...{{/i}}</p>
    </div>
  </li>
  ...
</ul>

{{_i}}More examples{{/i}}

{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

{{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

{{_i}}Default alert{{/i}}

{{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

{{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/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}}Dismiss buttons{{/i}}

{{_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}}Dismiss alerts via javascript{{/i}}

{{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

{{_i}}Options{{/i}}

{{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

{{_i}}Warning!{{/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}}Contextual alternatives{{/i}}

{{_i}}Add optional classes to change an alert's connotation.{{/i}}

{{_i}}Error or danger{{/i}}

{{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} 
<div class="alert alert-error">
  ...
</div>

{{_i}}Success{{/i}}

{{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} 
<div class="alert alert-success">
  ...
</div>

{{_i}}Information{{/i}}

{{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} 
<div class="alert alert-info">
  ...
</div>

{{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

{{_i}}Examples and markup{{/i}}

{{_i}}Basic{{/i}}

{{_i}}Default progress bar with a vertical gradient.{{/i}}

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

{{_i}}Striped{{/i}}

{{_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}}Animated{{/i}}

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

Stacked

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}}Options{{/i}}

{{_i}}Additional colors{{/i}}

{{_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}}Striped bars{{/i}}

{{_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}}Browser support{{/i}}

{{_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}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

{{_i}}Wells{{/i}}

{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

{{_i}}Look, I'm in a well!{{/i}} 
<div class="well">
  ...
</div>

{{_i}}Optional classes{{/i}}

{{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

{{_i}}Look, I'm in a well!{{/i}} 
<div class="well well-large">
  ...
</div>
{{_i}}Look, I'm in a well!{{/i}} 
<div class="well well-small">
  ...
</div>

{{_i}}Close icon{{/i}}

{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

<button class="close">&times;</button>

{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

<a class="close" href="#">&times;</a>

{{_i}}Helper classes{{/i}}

{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

{{_i}}.pull-left{{/i}}

{{_i}}Float an element left{{/i}}

class="pull-left"

.pull-left {
  float: left;
}

{{_i}}.pull-right{{/i}}

{{_i}}Float an element right{{/i}}

class="pull-right"

.pull-right {
  float: right;
}

{{_i}}.muted{{/i}}

{{_i}}Change an element's color to #999{{/i}}

class="muted"

.muted {
  color: #999;
}

{{_i}}.clearfix{{/i}}

{{_i}}Clear the float on any element{{/i}}

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
{{! /span9 }}
{{! row}}
{{! /.container }}