git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/components.html

   1 ---
   2 layout: default
   3 title: Components
   4 slug: components
   5 lead: "Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more."
   6 base_url: "../"
   7 ---
   8
   9
  10   <!-- Dropdowns
  11   ================================================== -->
  12   <div class="bs-docs-section">
  13     <div class="page-header">
  14       <h1 id="dropdowns">Dropdown menus</h1>
  15     </div>
  16     <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
  17
  18     <h3 id="dropdowns-example">Example</h3>
  19     <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
  20     <div class="bs-example">
  21       <div class="dropdown clearfix">
  22         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  23           <li><a tabindex="-1" href="#">Action</a></li>
  24           <li><a tabindex="-1" href="#">Another action</a></li>
  25           <li><a tabindex="-1" href="#">Something else here</a></li>
  26           <li class="divider"></li>
  27           <li><a tabindex="-1" href="#">Separated link</a></li>
  28         </ul>
  29       </div>
  30     </div><!-- /example -->
  31 {% highlight html %}
  32 <div class="dropdown">
  33   <!-- Link or button to toggle dropdown -->
  34   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  35     <li><a tabindex="-1" href="#">Action</a></li>
  36     <li><a tabindex="-1" href="#">Another action</a></li>
  37     <li><a tabindex="-1" href="#">Something else here</a></li>
  38     <li class="divider"></li>
  39     <li><a tabindex="-1" href="#">Separated link</a></li>
  40   </ul>
  41 </div>
  42 {% endhighlight %}
  43
  44     <h3 id="dropdowns-alignment">Aligning the menus</h3>
  45     <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
  46 {% highlight html %}
  47 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  48   ...
  49 </ul>
  50 {% endhighlight %}
  51
  52     <h3 id="dropdowns-headers">Dropdown headers</h3>
  53     <p>Add a header to break up label sections of actions in any dropdown menu.</p>
  54     <div class="bs-example">
  55       <div class="dropdown clearfix">
  56         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  57           <li class="dropdown-header">Dropdown header</li>
  58           <li><a tabindex="-1" href="#">Action</a></li>
  59           <li><a tabindex="-1" href="#">Another action</a></li>
  60           <li><a tabindex="-1" href="#">Something else here</a></li>
  61           <li class="divider"></li>
  62           <li class="dropdown-header">Dropdown header</li>
  63           <li><a tabindex="-1" href="#">Separated link</a></li>
  64         </ul>
  65       </div>
  66     </div><!-- /example -->
  67 {% highlight html %}
  68 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  69   <li class="dropdown-header">Dropdown header</li>
  70   ...
  71   <li class="divider"></li>
  72   <li class="dropdown-header">Dropdown header</li>
  73   ...
  74 </ul>
  75 {% endhighlight %}
  76
  77     <h3 id="dropdowns-disabled">Disabled menu options</h3>
  78     <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
  79     <div class="bs-example">
  80       <div class="dropdown clearfix">
  81         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  82           <li><a tabindex="-1" href="#">Regular link</a></li>
  83           <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  84           <li><a tabindex="-1" href="#">Another link</a></li>
  85         </ul>
  86       </div>
  87     </div><!-- /example -->
  88 {% highlight html %}
  89 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  90   <li><a tabindex="-1" href="#">Regular link</a></li>
  91   <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  92   <li><a tabindex="-1" href="#">Another link</a></li>
  93 </ul>
  94 {% endhighlight %}
  95   </div>
  96
  97
  98
  99   <!-- Button Groups
 100   ================================================== -->
 101   <div class="bs-docs-section">
 102     <div class="page-header">
 103       <h1 id="btn-groups">Button groups</h1>
 104     </div>
 105     <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#js-buttons">our buttons plugin</a>.</p>
 106
 107     <div class="bs-callout bs-callout-info">
 108       <h4>Tooltips &amp; popovers in button groups require special setting</h4>
 109       <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
 110     </div>
 111
 112     <h3 id="btn-groups-single">Basic button group</h3>
 113     <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
 114     <div class="bs-example">
 115       <div class="btn-group" style="margin: 9px 0 5px;">
 116         <button type="button" class="btn btn-default">Left</button>
 117         <button type="button" class="btn btn-default">Middle</button>
 118         <button type="button" class="btn btn-default">Right</button>
 119       </div>
 120     </div>
 121 {% highlight html %}
 122 <div class="btn-group">
 123   <button type="button" class="btn btn-default">Left</button>
 124   <button type="button" class="btn btn-default">Middle</button>
 125   <button type="button" class="btn btn-default">Right</button>
 126 </div>
 127 {% endhighlight %}
 128
 129     <h3 id="btn-groups-toolbar">Multiple button groups</h3>
 130     <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
 131     <div class="bs-example">
 132       <div class="btn-toolbar" style="margin: 0;">
 133         <div class="btn-group">
 134           <button type="button" class="btn btn-default">1</button>
 135           <button type="button" class="btn btn-default">2</button>
 136           <button type="button" class="btn btn-default">3</button>
 137           <button type="button" class="btn btn-default">4</button>
 138         </div>
 139         <div class="btn-group">
 140           <button type="button" class="btn btn-default">5</button>
 141           <button type="button" class="btn btn-default">6</button>
 142           <button type="button" class="btn btn-default">7</button>
 143         </div>
 144         <div class="btn-group">
 145           <button type="button" class="btn btn-default">8</button>
 146         </div>
 147       </div>
 148     </div>
 149 {% highlight html %}
 150 <div class="btn-toolbar">
 151   <div class="btn-group">...</div>
 152   <div class="btn-group">...</div>
 153   <div class="btn-group">...</div>
 154 </div>
 155 {% endhighlight %}
 156
 157     <h3 id="btn-groups-nested">Nested button groups</h3>
 158     <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
 159     <div class="bs-example">
 160       <div class="btn-group">
 161         <button type="button" class="btn btn-default">1</button>
 162         <button type="button" class="btn btn-default">2</button>
 163         <button type="button" class="btn btn-default">3</button>
 164
 165         <div class="btn-group">
 166           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 167             Dropdown
 168             <span class="caret"></span>
 169           </button>
 170           <ul class="dropdown-menu">
 171             <li><a href="#">Dropdown link</a></li>
 172             <li><a href="#">Dropdown link</a></li>
 173             <li><a href="#">Dropdown link</a></li>
 174            </ul>
 175         </div>
 176       </div>
 177     </div>
 178
 179     <h3 id="btn-groups-vertical">Vertical button groups</h3>
 180     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
 181     <div class="bs-example">
 182       <div class="btn-group-vertical">
 183         <button type="button" class="btn btn-default">Button</button>
 184         <button type="button" class="btn btn-default">Button</button>
 185         <button type="button" class="btn btn-default">Button</button>
 186         <button type="button" class="btn btn-default">Button</button>
 187       </div>
 188     </div>
 189 {% highlight html %}
 190 <div class="btn-group-vertical">
 191   ...
 192 </div>
 193 {% endhighlight %}
 194
 195     <h3 id="btn-groups-justified">Justified button groups</h3>
 196     <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
 197
 198     <div class="bs-callout bs-callout-warning">
 199       <h4>Element-specific usage</h4>
 200       <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
 201     </div>
 202
 203     <div class="bs-example">
 204       <div class="btn-group btn-group-justified">
 205         <a href="#" class="btn btn-default">Left</a>
 206         <a href="#" class="btn btn-default">Right</a>
 207         <a href="#" class="btn btn-default">Middle</a>
 208       </div>
 209     </div>
 210 {% highlight html %}
 211 <div class="btn-group btn-group-justified">
 212   ...
 213 </div>
 214 {% endhighlight %}
 215
 216   </div>
 217
 218
 219
 220   <!-- Split button dropdowns
 221   ================================================== -->
 222   <div class="bs-docs-section">
 223     <div class="page-header">
 224       <h1 id="btn-dropdowns">Button dropdown menus</h1>
 225     </div>
 226     <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
 227
 228     <div class="bs-callout bs-callout-danger">
 229       <h4>Plugin dependency</h4>
 230       <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
 231     </div>
 232
 233     <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
 234     <p>Turn a button into dropdown toggle with some basic markup changes.</p>
 235     <div class="bs-example">
 236       <div class="btn-toolbar" style="margin-bottom: 10px;">
 237         <div class="btn-group">
 238           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
 239           <ul class="dropdown-menu">
 240             <li><a href="#">Action</a></li>
 241             <li><a href="#">Another action</a></li>
 242             <li><a href="#">Something else here</a></li>
 243             <li class="divider"></li>
 244             <li><a href="#">Separated link</a></li>
 245           </ul>
 246         </div><!-- /btn-group -->
 247         <div class="btn-group">
 248           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
 249           <ul class="dropdown-menu">
 250             <li><a href="#">Action</a></li>
 251             <li><a href="#">Another action</a></li>
 252             <li><a href="#">Something else here</a></li>
 253             <li class="divider"></li>
 254             <li><a href="#">Separated link</a></li>
 255           </ul>
 256         </div><!-- /btn-group -->
 257         <div class="btn-group">
 258           <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
 259           <ul class="dropdown-menu">
 260             <li><a href="#">Action</a></li>
 261             <li><a href="#">Another action</a></li>
 262             <li><a href="#">Something else here</a></li>
 263             <li class="divider"></li>
 264             <li><a href="#">Separated link</a></li>
 265           </ul>
 266         </div><!-- /btn-group -->
 267         <div class="btn-group">
 268           <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
 269           <ul class="dropdown-menu">
 270             <li><a href="#">Action</a></li>
 271             <li><a href="#">Another action</a></li>
 272             <li><a href="#">Something else here</a></li>
 273             <li class="divider"></li>
 274             <li><a href="#">Separated link</a></li>
 275           </ul>
 276         </div><!-- /btn-group -->
 277         <div class="btn-group">
 278           <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
 279           <ul class="dropdown-menu">
 280             <li><a href="#">Action</a></li>
 281             <li><a href="#">Another action</a></li>
 282             <li><a href="#">Something else here</a></li>
 283             <li class="divider"></li>
 284             <li><a href="#">Separated link</a></li>
 285           </ul>
 286         </div><!-- /btn-group -->
 287       </div>
 288     </div>
 289 {% highlight html %}
 290 <!-- Single button -->
 291 <div class="btn-group">
 292   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 293     Action <span class="caret"></span>
 294   </button>
 295   <ul class="dropdown-menu">
 296     <li><a href="#">Action</a></li>
 297     <li><a href="#">Another action</a></li>
 298     <li><a href="#">Something else here</a></li>
 299     <li class="divider"></li>
 300     <li><a href="#">Separated link</a></li>
 301   </ul>
 302 </div>
 303 {% endhighlight %}
 304
 305     <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
 306     <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
 307     <div class="bs-example">
 308       <div class="btn-toolbar" style="margin: 0;">
 309         <div class="btn-group">
 310           <button type="button" class="btn btn-default">Action</button>
 311           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 312           <ul class="dropdown-menu">
 313             <li><a href="#">Action</a></li>
 314             <li><a href="#">Another action</a></li>
 315             <li><a href="#">Something else here</a></li>
 316             <li class="divider"></li>
 317             <li><a href="#">Separated link</a></li>
 318           </ul>
 319         </div><!-- /btn-group -->
 320         <div class="btn-group">
 321           <button type="button" class="btn btn-primary">Action</button>
 322           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 323           <ul class="dropdown-menu">
 324             <li><a href="#">Action</a></li>
 325             <li><a href="#">Another action</a></li>
 326             <li><a href="#">Something else here</a></li>
 327             <li class="divider"></li>
 328             <li><a href="#">Separated link</a></li>
 329           </ul>
 330         </div><!-- /btn-group -->
 331         <div class="btn-group">
 332           <button type="button" class="btn btn-danger">Danger</button>
 333           <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 334           <ul class="dropdown-menu">
 335             <li><a href="#">Action</a></li>
 336             <li><a href="#">Another action</a></li>
 337             <li><a href="#">Something else here</a></li>
 338             <li class="divider"></li>
 339             <li><a href="#">Separated link</a></li>
 340           </ul>
 341         </div><!-- /btn-group -->
 342         <div class="btn-group">
 343           <button type="button" class="btn btn-warning">Warning</button>
 344           <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 345           <ul class="dropdown-menu">
 346             <li><a href="#">Action</a></li>
 347             <li><a href="#">Another action</a></li>
 348             <li><a href="#">Something else here</a></li>
 349             <li class="divider"></li>
 350             <li><a href="#">Separated link</a></li>
 351           </ul>
 352         </div><!-- /btn-group -->
 353         <div class="btn-group">
 354           <button type="button" class="btn btn-success">Success</button>
 355           <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 356           <ul class="dropdown-menu">
 357             <li><a href="#">Action</a></li>
 358             <li><a href="#">Another action</a></li>
 359             <li><a href="#">Something else here</a></li>
 360             <li class="divider"></li>
 361             <li><a href="#">Separated link</a></li>
 362           </ul>
 363         </div><!-- /btn-group -->
 364       </div><!-- /btn-toolbar -->
 365     </div>
 366 {% highlight html %}
 367 <!-- Split button -->
 368 <div class="btn-group">
 369   <button type="button" class="btn btn-default">Action</button>
 370   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 371     <span class="caret"></span>
 372   </button>
 373   <ul class="dropdown-menu">
 374     <li><a href="#">Action</a></li>
 375     <li><a href="#">Another action</a></li>
 376     <li><a href="#">Something else here</a></li>
 377     <li class="divider"></li>
 378     <li><a href="#">Separated link</a></li>
 379   </ul>
 380 </div>
 381 {% endhighlight %}
 382
 383     <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
 384     <p>Button dropdowns work with buttons of all sizes.</p>
 385     <div class="bs-example">
 386       <div class="btn-toolbar" style="margin: 0;">
 387         <div class="btn-group">
 388           <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
 389             Large button <span class="caret"></span>
 390           </button>
 391           <ul class="dropdown-menu">
 392             <li><a href="#">Action</a></li>
 393             <li><a href="#">Another action</a></li>
 394             <li><a href="#">Something else here</a></li>
 395             <li class="divider"></li>
 396             <li><a href="#">Separated link</a></li>
 397           </ul>
 398         </div><!-- /btn-group -->
 399         <div class="btn-group">
 400           <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
 401             Small button <span class="caret"></span>
 402           </button>
 403           <ul class="dropdown-menu">
 404             <li><a href="#">Action</a></li>
 405             <li><a href="#">Another action</a></li>
 406             <li><a href="#">Something else here</a></li>
 407             <li class="divider"></li>
 408             <li><a href="#">Separated link</a></li>
 409           </ul>
 410         </div><!-- /btn-group -->
 411       </div><!-- /btn-toolbar -->
 412     </div><!-- /example -->
 413 {% highlight html %}
 414 <!-- Large button group -->
 415 <div class="btn-group">
 416   <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
 417     Large button <span class="caret"></span>
 418   </button>
 419   <ul class="dropdown-menu">
 420     ...
 421   </ul>
 422 </div>
 423
 424 <!-- Small button group -->
 425 <div class="btn-group">
 426   <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
 427     Small button <span class="caret"></span>
 428   </button>
 429   <ul class="dropdown-menu">
 430     ...
 431   </ul>
 432 </div>
 433 </div>
 434 {% endhighlight %}
 435
 436     <h3 id="btn-dropdowns-dropup">Dropup buttons</h3>
 437     <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
 438     <div class="bs-example">
 439       <div class="btn-toolbar">
 440         <div class="btn-group dropup">
 441           <button type="button" class="btn btn-default">Dropup</button>
 442           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 443           <ul class="dropdown-menu">
 444             <li><a href="#">Action</a></li>
 445             <li><a href="#">Another action</a></li>
 446             <li><a href="#">Something else here</a></li>
 447             <li class="divider"></li>
 448             <li><a href="#">Separated link</a></li>
 449           </ul>
 450         </div><!-- /btn-group -->
 451         <div class="btn-group dropup">
 452           <button type="button" class="btn btn-primary">Right dropup</button>
 453           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
 454           <ul class="dropdown-menu pull-right">
 455             <li><a href="#">Action</a></li>
 456             <li><a href="#">Another action</a></li>
 457             <li><a href="#">Something else here</a></li>
 458             <li class="divider"></li>
 459             <li><a href="#">Separated link</a></li>
 460           </ul>
 461         </div><!-- /btn-group -->
 462       </div>
 463     </div><!-- /example -->
 464 {% highlight html %}
 465 <div class="btn-group dropup">
 466   <button type="button" class="btn btn-default">Dropup</button>
 467   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 468     <span class="caret"></span>
 469   </button>
 470   <ul class="dropdown-menu">
 471     <!-- Dropdown menu links -->
 472   </ul>
 473 </div>
 474 {% endhighlight %}
 475
 476   </div>
 477
 478
 479
 480   <!-- Navs
 481   ================================================== -->
 482   <div class="bs-docs-section">
 483     <div class="page-header">
 484       <h1 id="nav">Navs</h1>
 485     </div>
 486
 487     <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
 488
 489     <h2 id="nav-tabs">Tabs</h2>
 490     <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
 491     <div class="bs-example">
 492       <ul class="nav nav-tabs">
 493         <li class="active"><a href="#">Home</a></li>
 494         <li><a href="#">Profile</a></li>
 495         <li><a href="#">Messages</a></li>
 496       </ul>
 497     </div>
 498 {% highlight html %}
 499 <ul class="nav nav-tabs">
 500   <li class="active"><a href="#">Home</a></li>
 501   <li><a href="#">Profile</a></li>
 502   <li><a href="#">Messages</a></li>
 503 </ul>
 504 {% endhighlight %}
 505
 506     <h2 id="nav-pills">Pills</h2>
 507     <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
 508     <div class="bs-example">
 509       <ul class="nav nav-pills">
 510         <li class="active"><a href="#">Home</a></li>
 511         <li><a href="#">Profile</a></li>
 512         <li><a href="#">Messages</a></li>
 513       </ul>
 514     </div>
 515 {% highlight html %}
 516 <ul class="nav nav-pills">
 517   <li class="active"><a href="#">Home</a></li>
 518   <li><a href="#">Profile</a></li>
 519   <li><a href="#">Messages</a></li>
 520 </ul>
 521 {% endhighlight %}
 522     <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
 523     <div class="bs-example">
 524       <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
 525         <li class="active"><a href="#">Home</a></li>
 526         <li><a href="#">Profile</a></li>
 527         <li><a href="#">Messages</a></li>
 528       </ul>
 529     </div>
 530 {% highlight html %}
 531 <ul class="nav nav-pills nav-stacked">
 532   ...
 533 </ul>
 534 {% endhighlight %}
 535
 536     <h2>Options</h2>
 537
 538     <h3 id="nav-justified">Justified links</h3>
 539     <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
 540     <div class="bs-example">
 541       <ul class="nav nav-tabs nav-justified">
 542         <li class="active"><a href="#">Home</a></li>
 543         <li><a href="#">Profile</a></li>
 544         <li><a href="#">Messages</a></li>
 545       </ul>
 546       <br>
 547       <ul class="nav nav-pills nav-justified">
 548         <li class="active"><a href="#">Home</a></li>
 549         <li><a href="#">Profile</a></li>
 550         <li><a href="#">Messages</a></li>
 551       </ul>
 552     </div>
 553 {% highlight html %}
 554 <ul class="nav nav-tabs nav-justified">
 555   ...
 556 </ul>
 557 <ul class="nav nav-pills nav-justified">
 558   ...
 559 </ul>
 560 {% endhighlight %}
 561
 562     <h3 id="nav-disabled-links">Disabled state</h3>
 563     <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
 564
 565     <div class="bs-callout bs-callout-warning">
 566       <h4>Link functionality not impacted</h4>
 567       <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
 568     </div>
 569
 570     <div class="bs-example">
 571       <ul class="nav nav-pills">
 572         <li><a href="#">Clickable link</a></li>
 573         <li><a href="#">Clickable link</a></li>
 574         <li class="disabled"><a href="#">Disabled link</a></li>
 575       </ul>
 576     </div>
 577 {% highlight html %}
 578 <ul class="nav nav-pills">
 579   ...
 580   <li class="disabled"><a href="#">Disabled link</a></li>
 581   ...
 582 </ul>
 583 {% endhighlight %}
 584
 585
 586     <h3 id="nav-alignment">Component alignment</h3>
 587     <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 588
 589
 590     <hr class="bs-docs-separator">
 591
 592
 593     <h2 id="nav-dropdowns">Dropdowns</h2>
 594     <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
 595
 596     <h3>Tabs with dropdowns</h3>
 597     <div class="bs-example">
 598       <ul class="nav nav-tabs">
 599         <li class="active"><a href="#">Home</a></li>
 600         <li><a href="#">Help</a></li>
 601         <li class="dropdown">
 602           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 603             Dropdown <span class="caret"></span>
 604           </a>
 605           <ul class="dropdown-menu">
 606             <li><a href="#">Action</a></li>
 607             <li><a href="#">Another action</a></li>
 608             <li><a href="#">Something else here</a></li>
 609             <li class="divider"></li>
 610             <li><a href="#">Separated link</a></li>
 611           </ul>
 612         </li>
 613       </ul>
 614     </div>
 615 {% highlight html %}
 616 <ul class="nav nav-tabs">
 617   ...
 618   <li class="dropdown">
 619     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 620       Dropdown <span class="caret"></span>
 621     </a>
 622     <ul class="dropdown-menu">
 623       ...
 624     </ul>
 625   </li>
 626   ...
 627 </ul>
 628 {% endhighlight %}
 629
 630     <h3>Pills with dropdowns</h3>
 631     <div class="bs-example">
 632       <ul class="nav nav-pills">
 633         <li class="active"><a href="#">Home</a></li>
 634         <li><a href="#">Help</a></li>
 635         <li class="dropdown">
 636           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 637             Dropdown <span class="caret"></span>
 638           </a>
 639           <ul class="dropdown-menu">
 640             <li><a href="#">Action</a></li>
 641             <li><a href="#">Another action</a></li>
 642             <li><a href="#">Something else here</a></li>
 643             <li class="divider"></li>
 644             <li><a href="#">Separated link</a></li>
 645           </ul>
 646         </li>
 647       </ul>
 648     </div><!-- /example -->
 649 {% highlight html %}
 650 <ul class="nav nav-pills">
 651   ...
 652   <li class="dropdown">
 653     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 654       Dropdown <span class="caret"></span>
 655     </a>
 656     <ul class="dropdown-menu">
 657       ...
 658     </ul>
 659   </li>
 660   ...
 661 </ul>
 662 {% endhighlight %}
 663
 664   </div>
 665
 666
 667
 668   <!-- Navbar
 669   ================================================== -->
 670   <div class="bs-docs-section">
 671     <div class="page-header">
 672       <h1 id="navbar">Navbar</h1>
 673     </div>
 674
 675     <h2 id="navbar-basic">Basic navbar</h2>
 676     <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
 677     <div class="bs-example">
 678       <div class="navbar">
 679         <a class="navbar-brand" href="#">Title</a>
 680         <ul class="nav navbar-nav">
 681           <li class="active"><a href="#">Home</a></li>
 682           <li><a href="#">Link</a></li>
 683           <li><a href="#">Link</a></li>
 684         </ul>
 685       </div>
 686     </div><!-- /example -->
 687 {% highlight html %}
 688 <div class="navbar">
 689   <a class="navbar-brand" href="#">Title</a>
 690   <ul class="nav navbar-nav">
 691     <li class="active"><a href="#">Home</a></li>
 692     <li><a href="#">Link</a></li>
 693     <li><a href="#">Link</a></li>
 694   </ul>
 695 </div>
 696 {% endhighlight %}
 697
 698     <h2>Navbar components</h2>
 699
 700     <h3 id="navbar-brand">Brand</h3>
 701     <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 702     <div class="bs-example">
 703       <div class="navbar">
 704         <a class="navbar-brand" href="#">Title</a>
 705       </div>
 706     </div><!-- /example -->
 707 {% highlight html %}
 708 <a class="navbar-brand" href="#">Title</a>
 709 {% endhighlight %}
 710
 711     <h3 id="navbar-nav">Nav links</h3>
 712     <p>Nav items are simple to add via unordered lists.</p>
 713     <div class="bs-example">
 714       <div class="navbar">
 715         <ul class="nav navbar-nav">
 716           <li class="active"><a href="#">Home</a></li>
 717           <li><a href="#">Link</a></li>
 718           <li class="disabled"><a href="#">Disabled</a></li>
 719         </ul>
 720       </div>
 721     </div><!-- /example -->
 722 {% highlight html %}
 723 <ul class="nav navbar-nav">
 724   <li class="active"><a href="#">Home</a></li>
 725   <li><a href="#">Link</a></li>
 726   <li class="disabled"><a href="#">Disabled</a></li>
 727 </ul>
 728 {% endhighlight %}
 729
 730     <h3 id="navbar-forms">Forms</h3>
 731     <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
 732     <div class="bs-example">
 733
 734       <div class="navbar">
 735         <form class="navbar-form pull-left">
 736           <input type="text" class="form-control" style="width: 200px;">
 737           <button type="submit" class="btn btn-default">Submit</button>
 738         </form>
 739       </div>
 740
 741       <div class="navbar">
 742         <form class="navbar-form pull-left">
 743           <select name="" id="" class="form-control" style="width: 200px;">
 744             <option value="1">1</option>
 745             <option value="2">2</option>
 746             <option value="3">3</option>
 747             <option value="4">4</option>
 748           </select>
 749           <button type="submit" class="btn btn-default">Submit</button>
 750         </form>
 751       </div>
 752
 753       <div class="navbar">
 754         <form class="navbar-form pull-left">
 755           <input type="text" class="form-control" style="width: 200px;">
 756           <input type="checkbox">
 757           <button type="submit" class="btn btn-default">Submit</button>
 758         </form>
 759       </div>
 760
 761       <div class="navbar">
 762         <form class="navbar-form pull-left">
 763           <input type="text" class="form-control" style="width: 200px;">
 764           <label class="checkbox-inline">
 765             <input type="checkbox"> Remember me
 766           </label>
 767           <button type="submit" class="btn btn-default">Submit</button>
 768         </form>
 769       </div>
 770
 771     </div><!-- /example -->
 772 {% highlight html %}
 773 <form class="navbar-form pull-left">
 774   <input type="text" class="form-control" style="width: 200px;">
 775   <button type="submit" class="btn btn-default">Submit</button>
 776 </form>
 777 {% endhighlight %}
 778
 779     <h3 id="navbar-buttons">Buttons</h3>
 780     <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
 781     <div class="bs-example">
 782       <div class="navbar">
 783         <a href="#" class="navbar-brand">Brand</a>
 784         <button type="button" class="btn btn-default navbar-btn">Sign in</button>
 785       </div>
 786     </div>
 787 {% highlight html %}
 788 <button type="button" class="btn btn-default navbar-btn">Sign in</button>
 789 {% endhighlight %}
 790
 791     <h3 id="navbar-text">Text</h3>
 792     <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
 793     <div class="bs-example">
 794       <div class="navbar">
 795         <a href="#" class="navbar-brand">Brand</a>
 796         <p class="navbar-text">Signed in as Mark Otto</p>
 797       </div>
 798     </div>
 799 {% highlight html %}
 800 <div class="navbar">
 801   <a href="#" class="navbar-brand">Brand</a>
 802   <p class="navbar-text">Signed in as Mark Otto</p>
 803 </div>
 804 {% endhighlight %}
 805
 806     <h3 id="navbar-links">Links</h3>
 807     <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
 808     <div class="bs-example">
 809       <div class="navbar">
 810         <a href="#" class="navbar-brand">Brand</a>
 811         <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
 812       </div>
 813     </div>
 814 {% highlight html %}
 815 <div class="navbar">
 816   <a href="#" class="navbar-brand">Brand</a>
 817   <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
 818 </div>
 819 {% endhighlight %}
 820
 821     <h3 id="navbar-component-alignment">Component alignment</h3>
 822     <p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
 823
 824
 825     <h2>Optional display variations</h2>
 826     <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
 827
 828     <h3 id="navbar-fixed-top">Fixed to top</h3>
 829     <p>Add <code>.navbar-fixed-top</code>.</p>
 830     <div class="bs-example bs-navbar-top-example">
 831       <div class="navbar navbar-fixed-top">
 832         <div class="container" style="width: auto;">
 833           <a class="navbar-brand" href="#">Title</a>
 834           <ul class="nav navbar-nav">
 835             <li class="active"><a href="#">Home</a></li>
 836             <li><a href="#">Link</a></li>
 837             <li><a href="#">Link</a></li>
 838           </ul>
 839         </div>
 840       </div>
 841     </div><!-- /example -->
 842 {% highlight html %}
 843 <div class="navbar navbar-fixed-top">
 844   ...
 845 </div>
 846 {% endhighlight %}
 847
 848     <div class="bs-callout bs-callout-danger">
 849       <h4>Body padding required</h4>
 850       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
 851 {% highlight css %}
 852 body { padding-top: 70px; }
 853 {% endhighlight %}
 854       <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
 855     </div>
 856
 857     <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
 858     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
 859     <div class="bs-example bs-navbar-bottom-example">
 860       <div class="navbar navbar-fixed-bottom">
 861         <div class="container" style="width: auto;">
 862           <a class="navbar-brand" href="#">Title</a>
 863           <ul class="nav navbar-nav">
 864             <li class="active"><a href="#">Home</a></li>
 865             <li><a href="#">Link</a></li>
 866             <li><a href="#">Link</a></li>
 867           </ul>
 868         </div>
 869       </div>
 870     </div><!-- /example -->
 871 {% highlight html %}
 872 <div class="navbar navbar-fixed-bottom">
 873   ...
 874 </div>
 875 {% endhighlight %}
 876
 877     <div class="bs-callout bs-callout-danger">
 878       <h4>Body padding required</h4>
 879       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
 880 {% highlight css %}
 881 body { padding-bottom: 70px; }
 882 {% endhighlight %}
 883       <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
 884     </div>
 885
 886     <h3 id="navbar-static-top">Static top navbar</h3>
 887     <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
 888     <div class="bs-example bs-navbar-top-example">
 889       <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
 890         <div class="container" style="width: auto;">
 891           <a class="navbar-brand" href="#">Title</a>
 892           <ul class="nav navbar-nav">
 893             <li class="active"><a href="#">Home</a></li>
 894             <li><a href="#">Link</a></li>
 895             <li><a href="#">Link</a></li>
 896           </ul>
 897         </div>
 898       </div>
 899     </div><!-- /example -->
 900 {% highlight html %}
 901 <div class="navbar navbar-static-top">
 902   ...
 903 </div>
 904 {% endhighlight %}
 905
 906
 907     <h2 id="navbar-responsive">Responsive navbar</h2>
 908     <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
 909     <div class="bs-example">
 910       <div class="navbar">
 911         <div class="container">
 912           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 913             <span class="icon-bar"></span>
 914             <span class="icon-bar"></span>
 915             <span class="icon-bar"></span>
 916           </button>
 917           <a class="navbar-brand" href="#">Title</a>
 918           <div class="nav-collapse collapse navbar-responsive-collapse">
 919             <ul class="nav navbar-nav">
 920               <li class="active"><a href="#">Home</a></li>
 921               <li><a href="#">Link</a></li>
 922               <li><a href="#">Link</a></li>
 923               <li class="dropdown">
 924                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 925                 <ul class="dropdown-menu">
 926                   <li><a href="#">Action</a></li>
 927                   <li><a href="#">Another action</a></li>
 928                   <li><a href="#">Something else here</a></li>
 929                   <li class="divider"></li>
 930                   <li class="dropdown-header">Dropdown header</li>
 931                   <li><a href="#">Separated link</a></li>
 932                   <li><a href="#">One more separated link</a></li>
 933                 </ul>
 934               </li>
 935             </ul>
 936             <form class="navbar-form pull-left" action="">
 937               <input type="text" class="form-control col-lg-8" placeholder="Search">
 938             </form>
 939             <ul class="nav navbar-nav pull-right">
 940               <li><a href="#">Link</a></li>
 941               <li class="dropdown">
 942                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 943                 <ul class="dropdown-menu">
 944                   <li><a href="#">Action</a></li>
 945                   <li><a href="#">Another action</a></li>
 946                   <li><a href="#">Something else here</a></li>
 947                   <li class="divider"></li>
 948                   <li><a href="#">Separated link</a></li>
 949                 </ul>
 950               </li>
 951             </ul>
 952           </div><!-- /.nav-collapse -->
 953         </div><!-- /.container -->
 954       </div><!-- /.navbar -->
 955     </div><!-- /example -->
 956 {% highlight html %}
 957 <div class="navbar">
 958   <div class="container">
 959
 960     <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
 961     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 962       <span class="icon-bar"></span>
 963       <span class="icon-bar"></span>
 964       <span class="icon-bar"></span>
 965     </button>
 966
 967     <!-- Be sure to leave the brand out there if you want it shown -->
 968     <a class="navbar-brand" href="#">Title</a>
 969
 970     <!-- Place everything within .navbar-collapse to hide it until above 768px -->
 971     <div class="nav-collapse collapse navbar-responsive-collapse">
 972       ...
 973     </div><!-- /.nav-collapse -->
 974   </div><!-- /.container -->
 975 </div><!-- /.navbar -->
 976 {% endhighlight %}
 977
 978     <div class="bs-callout bs-callout-danger">
 979       <h4>Plugin dependency</h4>
 980       <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
 981     </div>
 982
 983
 984     <h2>Inverted variation</h2>
 985     <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
 986     <div class="bs-example">
 987       <div class="navbar navbar-inverse">
 988         <div class="container">
 989           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
 990             <span class="icon-bar"></span>
 991             <span class="icon-bar"></span>
 992             <span class="icon-bar"></span>
 993           </button>
 994           <a class="navbar-brand" href="#">Title</a>
 995           <div class="nav-collapse collapse navbar-inverse-collapse">
 996             <ul class="nav navbar-nav">
 997               <li class="active"><a href="#">Home</a></li>
 998               <li><a href="#">Link</a></li>
 999               <li><a href="#">Link</a></li>
1000               <li class="dropdown">
1001                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1002                 <ul class="dropdown-menu">
1003                   <li><a href="#">Action</a></li>
1004                   <li><a href="#">Another action</a></li>
1005                   <li><a href="#">Something else here</a></li>
1006                   <li class="divider"></li>
1007                   <li class="dropdown-header">Dropdown header</li>
1008                   <li><a href="#">Separated link</a></li>
1009                   <li><a href="#">One more separated link</a></li>
1010                 </ul>
1011               </li>
1012             </ul>
1013             <form class="navbar-form pull-left" action="">
1014               <input type="text" class="form-control col-lg-8" placeholder="Search">
1015             </form>
1016             <ul class="nav navbar-nav pull-right">
1017               <li><a href="#">Link</a></li>
1018               <li class="dropdown">
1019                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1020                 <ul class="dropdown-menu">
1021                   <li><a href="#">Action</a></li>
1022                   <li><a href="#">Another action</a></li>
1023                   <li><a href="#">Something else here</a></li>
1024                   <li class="divider"></li>
1025                   <li><a href="#">Separated link</a></li>
1026                 </ul>
1027               </li>
1028             </ul>
1029           </div><!-- /.nav-collapse -->
1030         </div><!-- /.container -->
1031       </div><!-- /.navbar -->
1032     </div><!-- /example -->
1033 {% highlight html %}
1034 <div class="navbar navbar-inverse">
1035   ...
1036 </div>
1037 {% endhighlight %}
1038
1039   </div>
1040
1041
1042
1043   <!-- Breadcrumbs
1044   ================================================== -->
1045   <div class="bs-docs-section">
1046     <div class="page-header">
1047       <h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
1048     </div>
1049     <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
1050     <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
1051     <div class="bs-example">
1052       <ul class="breadcrumb">
1053         <li class="active">Home</li>
1054       </ul>
1055       <ul class="breadcrumb">
1056         <li><a href="#">Home</a></li>
1057         <li class="active">Library</li>
1058       </ul>
1059       <ul class="breadcrumb" style="margin-bottom: 5px;">
1060         <li><a href="#">Home</a></li>
1061         <li><a href="#">Library</a></li>
1062         <li class="active">Data</li>
1063       </ul>
1064     </div>
1065 {% highlight html %}
1066 <ul class="breadcrumb">
1067   <li><a href="#">Home</a></li>
1068   <li><a href="#">Library</a></li>
1069   <li class="active">Data</li>
1070 </ul>
1071 {% endhighlight %}
1072   </div>
1073
1074
1075
1076   <!-- Pagination
1077   ================================================== -->
1078   <div class="bs-docs-section">
1079     <div class="page-header">
1080       <h1 id="pagination">Pagination</h1>
1081     </div>
1082     <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
1083
1084     <h2 id="pagination-default">Standard pagination</h2>
1085     <p>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.</p>
1086     <div class="bs-example">
1087       <ul class="pagination">
1088         <li><a href="#">&laquo;</a></li>
1089         <li><a href="#">1</a></li>
1090         <li><a href="#">2</a></li>
1091         <li><a href="#">3</a></li>
1092         <li><a href="#">4</a></li>
1093         <li><a href="#">5</a></li>
1094         <li><a href="#">&raquo;</a></li>
1095       </ul>
1096     </div>
1097 {% highlight html %}
1098 <ul class="pagination">
1099   <li><a href="#">&laquo;</a></li>
1100   <li><a href="#">1</a></li>
1101   <li><a href="#">2</a></li>
1102   <li><a href="#">3</a></li>
1103   <li><a href="#">4</a></li>
1104   <li><a href="#">5</a></li>
1105   <li><a href="#">&raquo;</a></li>
1106 </ul>
1107 {% endhighlight %}
1108
1109     <h3>Disabled and active states</h3>
1110     <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
1111     <div class="bs-example">
1112       <ul class="pagination">
1113         <li class="disabled"><a href="#">&laquo;</a></li>
1114         <li class="active"><a href="#">1</a></li>
1115         <li><a href="#">2</a></li>
1116         <li><a href="#">3</a></li>
1117         <li><a href="#">4</a></li>
1118         <li><a href="#">5</a></li>
1119         <li><a href="#">&raquo;</a></li>
1120      </ul>
1121     </div>
1122 {% highlight html %}
1123 <ul class="pagination">
1124   <li class="disabled"><a href="#">&laquo;</a></li>
1125   <li class="active"><a href="#">1</a></li>
1126   ...
1127 </ul>
1128 {% endhighlight %}
1129     <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
1130 {% highlight html %}
1131 <ul class="pagination">
1132   <li class="disabled"><span>&laquo;</span></li>
1133   <li class="active"><span>1</span></li>
1134   ...
1135 </ul>
1136 {% endhighlight %}
1137
1138
1139     <h3>Sizes</h3>
1140     <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code>  for additional sizes.</p>
1141     <div class="bs-example">
1142       <div>
1143         <ul class="pagination pagination-large">
1144           <li><a href="#">&laquo;</a></li>
1145           <li><a href="#">1</a></li>
1146           <li><a href="#">2</a></li>
1147           <li><a href="#">3</a></li>
1148           <li><a href="#">4</a></li>
1149           <li><a href="#">5</a></li>
1150           <li><a href="#">&raquo;</a></li>
1151         </ul>
1152       </div>
1153       <div>
1154         <ul class="pagination">
1155           <li><a href="#">&laquo;</a></li>
1156           <li><a href="#">1</a></li>
1157           <li><a href="#">2</a></li>
1158           <li><a href="#">3</a></li>
1159           <li><a href="#">4</a></li>
1160           <li><a href="#">5</a></li>
1161           <li><a href="#">&raquo;</a></li>
1162         </ul>
1163       </div>
1164       <div>
1165         <ul class="pagination pagination-small">
1166           <li><a href="#">&laquo;</a></li>
1167           <li><a href="#">1</a></li>
1168           <li><a href="#">2</a></li>
1169           <li><a href="#">3</a></li>
1170           <li><a href="#">4</a></li>
1171           <li><a href="#">5</a></li>
1172           <li><a href="#">&raquo;</a></li>
1173         </ul>
1174       </div>
1175     </div>
1176 {% highlight html %}
1177 <ul class="pagination pagination-large">...</ul>
1178 <ul class="pagination pagination">...</ul>
1179 <ul class="pagination pagination-small">...</ul>
1180 {% endhighlight %}
1181
1182
1183     <h2 id="pagination-pager">Pager</h2>
1184     <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
1185
1186     <h3>Default example</h3>
1187     <p>By default, the pager centers links.</p>
1188     <div class="bs-example">
1189       <ul class="pager">
1190         <li><a href="#">Previous</a></li>
1191         <li><a href="#">Next</a></li>
1192       </ul>
1193     </div>
1194 {% highlight html %}
1195 <ul class="pager">
1196   <li><a href="#">Previous</a></li>
1197   <li><a href="#">Next</a></li>
1198 </ul>
1199 {% endhighlight %}
1200
1201     <h3>Aligned links</h3>
1202     <p>Alternatively, you can align each link to the sides:</p>
1203     <div class="bs-example">
1204       <ul class="pager">
1205         <li class="previous"><a href="#">&larr; Older</a></li>
1206         <li class="next"><a href="#">Newer &rarr;</a></li>
1207       </ul>
1208     </div>
1209 {% highlight html %}
1210 <ul class="pager">
1211   <li class="previous"><a href="#">&larr; Older</a></li>
1212   <li class="next"><a href="#">Newer &rarr;</a></li>
1213 </ul>
1214 {% endhighlight %}
1215
1216
1217     <h3>Optional disabled state</h3>
1218     <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
1219     <div class="bs-example">
1220       <ul class="pager">
1221         <li class="previous disabled"><a href="#">&larr; Older</a></li>
1222         <li class="next"><a href="#">Newer &rarr;</a></li>
1223       </ul>
1224     </div>
1225 {% highlight html %}
1226 <ul class="pager">
1227   <li class="previous disabled"><a href="#">&larr; Older</a></li>
1228   <li class="next"><a href="#">Newer &rarr;</a></li>
1229 </ul>
1230 {% endhighlight %}
1231   </div>
1232
1233
1234
1235   <!-- Labels
1236   ================================================== -->
1237   <div class="bs-docs-section">
1238     <div class="page-header">
1239       <h1 id="labels">Labels</h1>
1240     </div>
1241     <p class="lead"></p>
1242
1243     <h3>Example</h3>
1244     <div class="bs-example">
1245       <h1>Example heading <span class="label">New</span></h1>
1246       <h2>Example heading <span class="label">New</span></h2>
1247       <h3>Example heading <span class="label">New</span></h3>
1248       <h4>Example heading <span class="label">New</span></h4>
1249       <h5>Example heading <span class="label">New</span></h5>
1250       <h6>Example heading <span class="label">New</span></h6>
1251     </div>
1252 {% highlight html %}
1253 <h3>Example heading <span class="label">New</span></h3>
1254 {% endhighlight %}
1255
1256     <h3>Available variations</h3>
1257     <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
1258     <div class="bs-example">
1259       <span class="label">Default</span>
1260       <span class="label label-success">Success</span>
1261       <span class="label label-warning">Warning</span>
1262       <span class="label label-danger">Danger</span>
1263       <span class="label label-info">Info</span>
1264     </div>
1265 {% highlight html %}
1266 <span class="label">Default</span>
1267 <span class="label label-success">Success</span>
1268 <span class="label label-warning">Warning</span>
1269 <span class="label label-danger">Danger</span>
1270 <span class="label label-info">Info</span>
1271 {% endhighlight %}
1272
1273   </div>
1274
1275
1276
1277   <!-- Badges
1278   ================================================== -->
1279   <div class="bs-docs-section">
1280     <div class="page-header">
1281       <h1 id="badges">Badges</h1>
1282     </div>
1283     <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
1284
1285     <div class="bs-example">
1286       <a href="#">Inbox <span class="badge">42</span></a>
1287     </div>
1288 {% highlight html %}
1289 <a href="#">Inbox <span class="badge">42</span></a>
1290 {% endhighlight %}
1291
1292     <h4>Self collapsing</h4>
1293     <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
1294
1295     <div class="bs-callout bs-callout-danger">
1296       <h4>Cross-browser compatibility</h4>
1297       <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
1298     </div>
1299
1300     <h4>Adapts to active nav states</h4>
1301     <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
1302     <div class="bs-example">
1303       <ul class="nav nav-pills">
1304         <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
1305         <li><a href="#">Profile</a></li>
1306         <li><a href="#">Messages <span class="badge">3</span></a></li>
1307       </ul>
1308       <br>
1309       <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
1310         <li class="active">
1311           <a href="#">
1312             <span class="badge pull-right">42</span>
1313             Home
1314           </a>
1315         </li>
1316         <li><a href="#">Profile</a></li>
1317         <li>
1318           <a href="#">
1319             <span class="badge pull-right">3</span>
1320             Messages
1321           </a>
1322         </li>
1323       </ul>
1324     </div>
1325 {% highlight html %}
1326 <ul class="nav nav-pills nav-stacked">
1327   <li class="active">
1328     <a href="#">
1329       <span class="badge pull-right">42</span>
1330       Home
1331     </a>
1332   </li>
1333   ...
1334 </ul>
1335 {% endhighlight %}
1336   </div>
1337
1338
1339
1340   <!-- Typographic components
1341   ================================================== -->
1342   <div class="bs-docs-section">
1343     <div class="page-header">
1344       <h1 id="type-components">Typographic components</h1>
1345     </div>
1346
1347     <h2 id="type-components-jumbotron">Jumbotron</h2>
1348     <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
1349     <div class="bs-example">
1350       <div class="jumbotron">
1351         <h1>Hello, world!</h1>
1352         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1353         <p><a class="btn btn-primary btn-large">Learn more</a></p>
1354       </div>
1355     </div>
1356 {% highlight html %}
1357 <div class="jumbotron">
1358   <h1>Hello, world!</h1>
1359   <p>...</p>
1360   <p><a class="btn btn-primary btn-large">Learn more</a></p>
1361 </div>
1362 {% endhighlight %}
1363
1364     <h2 id="type-components-page-header">Page header</h2>
1365     <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
1366     <div class="bs-example">
1367       <div class="page-header">
1368         <h1>Example page header <small>Subtext for header</small></h1>
1369       </div>
1370     </div>
1371 {% highlight html %}
1372 <div class="page-header">
1373   <h1>Example page header <small>Subtext for header</small></h1>
1374 </div>
1375 {% endhighlight %}
1376   </div>
1377
1378
1379
1380   <!-- Thumbnails
1381   ================================================== -->
1382   <div class="bs-docs-section">
1383     <div class="page-header">
1384       <h1 id="thumbnails">Thumbnails</h1>
1385     </div>
1386     <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
1387
1388     <h3>Default thumbnails</h3>
1389     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
1390     <div class="bs-example">
1391       <div class="row">
1392         <div class="col-lg-3">
1393           <a href="#" class="thumbnail">
1394             <img data-src="holder.js/100%x180" alt="">
1395           </a>
1396         </div>
1397         <div class="col-lg-3">
1398           <a href="#" class="thumbnail">
1399             <img data-src="holder.js/100%x180" alt="">
1400           </a>
1401         </div>
1402         <div class="col-lg-3">
1403           <a href="#" class="thumbnail">
1404             <img data-src="holder.js/100%x180" alt="">
1405           </a>
1406         </div>
1407         <div class="col-lg-3">
1408           <a href="#" class="thumbnail">
1409             <img data-src="holder.js/100%x180" alt="">
1410           </a>
1411         </div>
1412       </div>
1413     </div><!-- /.bs-example -->
1414 {% highlight html %}
1415 <div class="row">
1416   <div class="col-lg-3">
1417     <a href="#" class="thumbnail">
1418       <img data-src="holder.js/100%x180" alt="">
1419     </a>
1420   </div>
1421   ...
1422 </div>
1423 {% endhighlight %}
1424
1425     <h3>Custom content thumbnails</h3>
1426     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
1427     <div class="bs-example">
1428       <div class="row">
1429         <div class="col-lg-4">
1430           <div class="thumbnail">
1431             <img data-src="holder.js/300x200" alt="">
1432             <div class="caption">
1433               <h3>Thumbnail label</h3>
1434               <p>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.</p>
1435               <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
1436             </div>
1437           </div>
1438         </div>
1439         <div class="col-lg-4">
1440           <div class="thumbnail">
1441             <img data-src="holder.js/300x200" alt="">
1442             <div class="caption">
1443               <h3>Thumbnail label</h3>
1444               <p>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.</p>
1445               <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
1446             </div>
1447           </div>
1448         </div>
1449         <div class="col-lg-4">
1450           <div class="thumbnail">
1451             <img data-src="holder.js/300x200" alt="">
1452             <div class="caption">
1453               <h3>Thumbnail label</h3>
1454               <p>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.</p>
1455               <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
1456             </div>
1457           </div>
1458         </div>
1459       </div>
1460     </div><!-- /.bs-example -->
1461 {% highlight html %}
1462 <div class="row">
1463   <div class="col-lg-3">
1464     <div class="thumbnail">
1465       <img data-src="holder.js/300x200" alt="">
1466       <div class="caption">
1467         <h3>Thumbnail label</h3>
1468         <p>...</p>
1469         <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
1470       </div>
1471     </div>
1472   </div>
1473 </div>
1474 {% endhighlight %}
1475   </div>
1476
1477
1478
1479
1480   <!-- Alerts
1481   ================================================== -->
1482   <div class="bs-docs-section">
1483     <div class="page-header">
1484       <h1 id="alerts">Alerts</h1>
1485     </div>
1486     <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
1487
1488     <h3 id="alerts-default">Default alert</h3>
1489     <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
1490
1491     <div class="bs-callout bs-callout-warning">
1492       <h4>Ensure proper behavior across all devices</h4>
1493       <p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
1494     </div>
1495
1496     <div class="bs-example">
1497       <div class="alert">
1498         <button type="button" class="close" data-dismiss="alert">&times;</button>
1499         <strong>Warning!</strong> Best check yo self, you're not looking too good.
1500       </div>
1501     </div>
1502 {% highlight html %}
1503 <div class="alert">
1504   <button type="button" class="close" data-dismiss="alert">&times;</button>
1505   <strong>Warning!</strong> Best check yo self, you're not looking too good.
1506 </div>
1507 {% endhighlight %}
1508
1509     <h3 id="alerts-block">Block alerts</h3>
1510     <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
1511     <div class="bs-example">
1512       <div class="alert alert-block">
1513         <button type="button" class="close" data-dismiss="alert">&times;</button>
1514         <h4>Warning!</h4>
1515         <p>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>
1516       </div>
1517     </div>
1518 {% highlight html %}
1519 <div class="alert alert-block">
1520   <button type="button" class="close" data-dismiss="alert">&times;</button>
1521   <h4>Warning!</h4>
1522   <p>...</p>
1523 </div>
1524 {% endhighlight %}
1525
1526     <h3 id="alerts-alternatives">Contextual alternatives</h3>
1527     <p>Add optional classes to change an alert's connotation.</p>
1528     <div class="bs-example">
1529       <div class="alert alert-danger">
1530         <button type="button" class="close" data-dismiss="alert">&times;</button>
1531         <strong>Oh snap!</strong> Change a few things up and try submitting again.
1532       </div>
1533       <div class="alert alert-success">
1534         <button type="button" class="close" data-dismiss="alert">&times;</button>
1535         <strong>Well done!</strong> You successfully read this important alert message.
1536       </div>
1537       <div class="alert alert-info">
1538         <button type="button" class="close" data-dismiss="alert">&times;</button>
1539         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
1540       </div>
1541     </div>
1542 {% highlight html %}
1543 <div class="alert alert-danger">...</div>
1544 <div class="alert alert-success">...</div>
1545 <div class="alert alert-info">...</div>
1546 {% endhighlight %}
1547
1548     <h3 id="alerts-links">Links in alerts</h3>
1549     <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
1550     <div class="bs-example">
1551       <div class="alert alert-danger">
1552         <button type="button" class="close" data-dismiss="alert">&times;</button>
1553         <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
1554       </div>
1555       <div class="alert alert-success">
1556         <button type="button" class="close" data-dismiss="alert">&times;</button>
1557         <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
1558       </div>
1559       <div class="alert alert-info">
1560         <button type="button" class="close" data-dismiss="alert">&times;</button>
1561         <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
1562       </div>
1563     </div>
1564 {% highlight html %}
1565 <div class="alert alert-danger">
1566   <a href="#" class="alert-link">...</a>
1567 </div>
1568 <div class="alert alert-success">
1569   <a href="#" class="alert-link">...</a>
1570 </div>
1571 <div class="alert alert-info">
1572   <a href="#" class="alert-link">...</a>
1573 </div>
1574 {% endhighlight %}
1575   </div>
1576
1577
1578
1579
1580   <!-- Progress bars
1581   ================================================== -->
1582   <div class="bs-docs-section">
1583     <div class="page-header">
1584       <h1 id="progress">Progress bars</h1>
1585     </div>
1586     <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
1587
1588     <div class="bs-callout bs-callout-danger">
1589       <h4>Cross-browser compatibility</h4>
1590       <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
1591     </div>
1592
1593     <h3 id="progress-basic">Basic</h3>
1594     <p>Default progress bar with a vertical gradient.</p>
1595     <div class="bs-example">
1596       <div class="progress">
1597         <div class="progress-bar" style="width: 60%;"></div>
1598       </div>
1599     </div>
1600 {% highlight html %}
1601 <div class="progress">
1602   <div class="progress-bar" style="width: 60%;"></div>
1603 </div>
1604 {% endhighlight %}
1605
1606     <h3 id="progress-alternatives">Contextual alternatives</h3>
1607     <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
1608     <div class="bs-example">
1609       <div class="progress" style="margin-bottom: 9px;">
1610         <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1611       </div>
1612       <div class="progress" style="margin-bottom: 9px;">
1613         <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1614       </div>
1615       <div class="progress" style="margin-bottom: 9px;">
1616         <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1617       </div>
1618       <div class="progress">
1619         <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1620       </div>
1621     </div>
1622 {% highlight html %}
1623 <div class="progress">
1624   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1625 </div>
1626 <div class="progress">
1627   <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1628 </div>
1629 <div class="progress">
1630   <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1631 </div>
1632 <div class="progress">
1633   <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1634 </div>
1635 {% endhighlight %}
1636
1637     <h3 id="progress-striped">Striped</h3>
1638     <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
1639     <div class="bs-example">
1640       <div class="progress progress-striped" style="margin-bottom: 9px;">
1641         <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1642       </div>
1643       <div class="progress progress-striped" style="margin-bottom: 9px;">
1644         <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1645       </div>
1646       <div class="progress progress-striped" style="margin-bottom: 9px;">
1647         <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1648       </div>
1649       <div class="progress progress-striped">
1650         <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1651       </div>
1652     </div>
1653 {% highlight html %}
1654 <div class="progress progress-striped">
1655   <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1656 </div>
1657 <div class="progress progress-striped">
1658   <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1659 </div>
1660 <div class="progress progress-striped">
1661   <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1662 </div>
1663 <div class="progress progress-striped">
1664   <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1665 </div>
1666 {% endhighlight %}
1667
1668     <h3 id="progress-animated">Animated</h3>
1669     <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
1670     <div class="bs-example">
1671       <div class="progress progress-striped active">
1672         <div class="progress-bar" style="width: 45%"></div>
1673       </div>
1674     </div>
1675 {% highlight html %}
1676 <div class="progress progress-striped active">
1677   <div class="progress-bar" style="width: 45%"></div>
1678 </div>
1679 {% endhighlight %}
1680
1681     <h3 id="progress-stacked">Stacked</h3>
1682     <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
1683     <div class="bs-example">
1684       <div class="progress">
1685         <div class="progress-bar progress-bar-success" style="width: 35%"></div>
1686         <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
1687         <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
1688       </div>
1689     </div>
1690 {% highlight html %}
1691 <div class="progress">
1692   <div class="progress-bar progress-bar-success" style="width: 35%"></div>
1693   <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
1694   <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
1695 </div>
1696 {% endhighlight %}
1697   </div>
1698
1699
1700
1701
1702   <!-- Media object
1703   ================================================== -->
1704   <div class="bs-docs-section">
1705     <div class="page-header">
1706       <h1 id="media">Media object</h1>
1707     </div>
1708     <p class="lead">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.</p>
1709
1710     <h3>Default example</h3>
1711     <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
1712     <div class="bs-example">
1713       <div class="media">
1714         <a class="pull-left" href="#">
1715           <img class="media-object" data-src="holder.js/64x64">
1716         </a>
1717         <div class="media-body">
1718           <h4 class="media-heading">Media heading</h4>
1719           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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
1720         </div>
1721       </div>
1722       <div class="media">
1723         <a class="pull-left" href="#">
1724           <img class="media-object" data-src="holder.js/64x64">
1725         </a>
1726         <div class="media-body">
1727           <h4 class="media-heading">Media heading</h4>
1728           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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
1729           <div class="media">
1730             <a class="pull-left" href="#">
1731               <img class="media-object" data-src="holder.js/64x64">
1732             </a>
1733             <div class="media-body">
1734               <h4 class="media-heading">Media heading</h4>
1735               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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
1736             </div>
1737           </div>
1738         </div>
1739       </div>
1740     </div><!-- /.bs-example -->
1741 {% highlight html %}
1742 <div class="media">
1743   <a class="pull-left" href="#">
1744     <img class="media-object" src="...">
1745   </a>
1746   <div class="media-body">
1747     <h4 class="media-heading">Media heading</h4>
1748     ...
1749   </div>
1750 </div>
1751 {% endhighlight %}
1752
1753     <h3>Media list</h3>
1754     <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
1755     <div class="bs-example">
1756       <ul class="media-list">
1757         <li class="media">
1758           <a class="pull-left" href="#">
1759             <img class="media-object" data-src="holder.js/64x64">
1760           </a>
1761           <div class="media-body">
1762             <h4 class="media-heading">Media heading</h4>
1763             <p>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.</p>
1764             <!-- Nested media object -->
1765             <div class="media">
1766               <a class="pull-left" href="#">
1767                 <img class="media-object" data-src="holder.js/64x64">
1768               </a>
1769               <div class="media-body">
1770                 <h4 class="media-heading">Nested media heading</h4>
1771                 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.
1772                 <!-- Nested media object -->
1773                 <div class="media">
1774                   <a class="pull-left" href="#">
1775                     <img class="media-object" data-src="holder.js/64x64">
1776                   </a>
1777                   <div class="media-body">
1778                     <h4 class="media-heading">Nested media heading</h4>
1779                     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.
1780                   </div>
1781                 </div>
1782               </div>
1783             </div>
1784             <!-- Nested media object -->
1785             <div class="media">
1786               <a class="pull-left" href="#">
1787                 <img class="media-object" data-src="holder.js/64x64">
1788               </a>
1789               <div class="media-body">
1790                 <h4 class="media-heading">Nested media heading</h4>
1791                 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.
1792               </div>
1793             </div>
1794           </div>
1795         </li>
1796         <li class="media">
1797           <a class="pull-right" href="#">
1798             <img class="media-object" data-src="holder.js/64x64">
1799           </a>
1800           <div class="media-body">
1801             <h4 class="media-heading">Media heading</h4>
1802             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.
1803           </div>
1804         </li>
1805       </ul>
1806     </div>
1807 {% highlight html %}
1808 <ul class="media-list">
1809   <li class="media">
1810     <a class="pull-left" href="#">
1811       <img class="media-object" src="...">
1812     </a>
1813     <div class="media-body">
1814       <h4 class="media-heading">Media heading</h4>
1815       ...
1816     </div>
1817   </li>
1818 </ul>
1819 {% endhighlight %}
1820   </div>
1821
1822
1823
1824
1825
1826   <!-- List group
1827   ================================================== -->
1828   <div class="bs-docs-section">
1829     <div class="page-header">
1830       <h1 id="list-group">List group</h1>
1831     </div>
1832     <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
1833
1834     <h3 id="list-group-basic">Basic list group</h3>
1835     <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
1836     <div class="bs-example">
1837       <ul class="list-group">
1838         <li class="list-group-item">Cras justo odio</li>
1839         <li class="list-group-item">Dapibus ac facilisis in</li>
1840         <li class="list-group-item">Morbi leo risus</li>
1841         <li class="list-group-item">Porta ac consectetur ac</li>
1842         <li class="list-group-item">Vestibulum at eros</li>
1843       </ul>
1844     </div>
1845 {% highlight html %}
1846 <ul class="list-group">
1847   <li class="list-group-item">Cras justo odio</li>
1848   <li class="list-group-item">Dapibus ac facilisis in</li>
1849   <li class="list-group-item">Morbi leo risus</li>
1850   <li class="list-group-item">Porta ac consectetur ac</li>
1851   <li class="list-group-item">Vestibulum at eros</li>
1852 </ul>
1853 {% endhighlight %}
1854
1855     <h3 id="list-group-badges">With badges</h3>
1856     <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
1857     <div class="bs-example">
1858       <ul class="list-group">
1859         <li class="list-group-item">
1860           <span class="badge">14</span>
1861           Cras justo odio
1862         </li>
1863         <li class="list-group-item">
1864           <span class="badge">2</span>
1865           Dapibus ac facilisis in
1866         </li>
1867         <li class="list-group-item">
1868           <span class="badge">1</span>
1869           Morbi leo risus
1870         </li>
1871       </ul>
1872     </div>
1873 {% highlight html %}
1874 <ul class="list-group">
1875   <li class="list-group-item">
1876     <span class="badge">14</span>
1877     Cras justo odio
1878   </li>
1879 </ul>
1880 {% endhighlight %}
1881
1882     <h3 id="list-group-linked">Linked list group</h3>
1883     <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
1884     <div class="bs-example">
1885       <div class="list-group">
1886         <a href="#" class="list-group-item active">
1887           Cras justo odio
1888         </a>
1889         <a href="#" class="list-group-item">Dapibus ac facilisis in
1890         </a>
1891         <a href="#" class="list-group-item">Morbi leo risus
1892         </a>
1893         <a href="#" class="list-group-item">Porta ac consectetur ac
1894         </a>
1895         <a href="#" class="list-group-item">Vestibulum at eros
1896         </a>
1897       </div>
1898     </div>
1899 {% highlight html %}
1900 <div class="list-group">
1901   <a href="#" class="list-group-item active">
1902     Cras justo odio
1903   </a>
1904   <a href="#" class="list-group-item">Dapibus ac facilisis in
1905   </a>
1906   <a href="#" class="list-group-item">Morbi leo risus
1907   </a>
1908   <a href="#" class="list-group-item">Porta ac consectetur ac
1909   </a>
1910   <a href="#" class="list-group-item">Vestibulum at eros
1911   </a>
1912 </div>
1913 {% endhighlight %}
1914
1915     <h3 id="list-group-custom-content">Custom content</h3>
1916     <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
1917     <div class="bs-example">
1918       <div class="list-group">
1919         <a href="#" class="list-group-item active">
1920           <h4 class="list-group-item-heading">List group item heading</h4>
1921           <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
1922         </a>
1923         <a href="#" class="list-group-item">
1924           <h4 class="list-group-item-heading">List group item heading</h4>
1925           <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
1926         </a>
1927         <a href="#" class="list-group-item">
1928           <h4 class="list-group-item-heading">List group item heading</h4>
1929           <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
1930         </a>
1931       </div>
1932     </div>
1933 {% highlight html %}
1934 <div class="list-group">
1935   <a href="#" class="list-group-item active">
1936     <h4 class="list-group-item-heading">List group item heading</h4>
1937     <p class="list-group-item-text">...</p>
1938   </a>
1939 </div>
1940 {% endhighlight %}
1941   </div>
1942
1943
1944
1945
1946   <!-- Panels
1947   ================================================== -->
1948   <div class="bs-docs-section">
1949     <div class="page-header">
1950       <h1 id="panels">Panels</h1>
1951     </div>
1952     <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
1953
1954     <h3 id="panels-basic">Basic panel</h3>
1955     <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
1956     <div class="bs-example">
1957       <div class="panel">
1958         Basic panel example
1959       </div>
1960     </div>
1961 {% highlight html %}
1962 <div class="panel">
1963   Basic panel example
1964 </div>
1965 {% endhighlight %}
1966
1967     <h3 id="panels-heading">Panel with heading</h3>
1968     <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
1969     <div class="bs-example">
1970       <div class="panel">
1971         <div class="panel-heading">Panel heading</div>
1972         Panel content
1973       </div>
1974       <div class="panel">
1975         <div class="panel-heading">
1976           <h3 class="panel-title">Panel title</h3>
1977         </div>
1978         Panel content
1979       </div>
1980     </div>
1981 {% highlight html %}
1982 <div class="panel">
1983   <div class="panel-heading">Panel heading</div>
1984   Panel content
1985 </div>
1986
1987 <div class="panel">
1988   <div class="panel-heading">
1989     <h3 class="panel-title">Panel title</h3>
1990   </div>
1991   Panel content
1992 </div>
1993 {% endhighlight %}
1994
1995     <h3 id="panels-footer">Panel with footer</h3>
1996     <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
1997     <div class="bs-example">
1998       <div class="panel">
1999         Panel content
2000         <div class="panel-footer">Panel footer</div>
2001       </div>
2002     </div>
2003 {% highlight html %}
2004 <div class="panel">
2005   Panel content
2006   <div class="panel-footer">Panel footer</div>
2007 </div>
2008 {% endhighlight %}
2009
2010     <h3 id="panels-alternatives">Contextual alternatives</h3>
2011     <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
2012     <div class="bs-example">
2013       <div class="panel panel-primary">
2014         <div class="panel-heading">
2015           <h3 class="panel-title">Panel title</h3>
2016         </div>
2017         Panel content
2018       </div>
2019       <div class="panel panel-success">
2020         <div class="panel-heading">
2021           <h3 class="panel-title">Panel title</h3>
2022         </div>
2023         Panel content
2024       </div>
2025       <div class="panel panel-warning">
2026         <div class="panel-heading">
2027           <h3 class="panel-title">Panel title</h3>
2028         </div>
2029         Panel content
2030       </div>
2031       <div class="panel panel-danger">
2032         <div class="panel-heading">
2033           <h3 class="panel-title">Panel title</h3>
2034         </div>
2035         Panel content
2036       </div>
2037       <div class="panel panel-info">
2038         <div class="panel-heading">
2039           <h3 class="panel-title">Panel title</h3>
2040         </div>
2041         Panel content
2042       </div>
2043     </div>
2044 {% highlight html %}
2045 <div class="panel panel-primary">...</div>
2046 <div class="panel panel-success">...</div>
2047 <div class="panel panel-warning">...</div>
2048 <div class="panel panel-danger">...</div>
2049 <div class="panel panel-info">...</div>
2050 {% endhighlight %}
2051
2052     <h3 id="panels-list-group">With list groups</h3>
2053     <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
2054     <div class="bs-example">
2055       <div class="panel">
2056         <!-- Default panel contents -->
2057         <div class="panel-heading">Panel heading</div>
2058         <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
2059
2060         <!-- List group -->
2061         <ul class="list-group list-group-flush">
2062           <li class="list-group-item">Cras justo odio</li>
2063           <li class="list-group-item">Dapibus ac facilisis in</li>
2064           <li class="list-group-item">Morbi leo risus</li>
2065           <li class="list-group-item">Porta ac consectetur ac</li>
2066           <li class="list-group-item">Vestibulum at eros</li>
2067         </ul>
2068       </div>
2069     </div>
2070 {% highlight html %}
2071 <div class="panel">
2072   <!-- Default panel contents -->
2073   <div class="panel-heading">Panel heading</div>
2074   <p>...</p>
2075
2076   <!-- List group -->
2077   <ul class="list-group list-group-flush">
2078     <li class="list-group-item">Cras justo odio</li>
2079     <li class="list-group-item">Dapibus ac facilisis in</li>
2080     <li class="list-group-item">Morbi leo risus</li>
2081     <li class="list-group-item">Porta ac consectetur ac</li>
2082     <li class="list-group-item">Vestibulum at eros</li>
2083   </ul>
2084 </div>
2085 {% endhighlight %}
2086
2087   </div>
2088
2089
2090
2091
2092
2093   <!-- Wells
2094   ================================================== -->
2095   <div class="bs-docs-section">
2096     <div class="page-header">
2097       <h1 id="wells">Wells</h1>
2098     </div>
2099
2100     <h3>Default well</h3>
2101     <p>Use the well as a simple effect on an element to give it an inset effect.</p>
2102     <div class="bs-example">
2103       <div class="well">
2104         Look, I'm in a well!
2105       </div>
2106     </div>
2107 {% highlight html %}
2108 <div class="well">...</div>
2109 {% endhighlight %}
2110     <h3>Optional classes</h3>
2111     <p>Control padding and rounded corners with two optional modifier classes.</p>
2112     <div class="bs-example">
2113       <div class="well well-large">
2114         Look, I'm in a well!
2115       </div>
2116     </div>
2117 {% highlight html %}
2118 <div class="well well-large">...</div>
2119 {% endhighlight %}
2120
2121     <div class="bs-example">
2122       <div class="well well-small">
2123         Look, I'm in a well!
2124       </div>
2125     </div>
2126 {% highlight html %}
2127 <div class="well well-small">...</div>
2128 {% endhighlight %}
2129   </div>