bootswatch

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Components · Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="">  <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-146052-10']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body data-spy="scroll" data-target=".bs-docs-sidebar">  <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class=""> <a href="./index.html">Home</a> </li> <li class=""> <a href="./getting-started.html">Get started</a> </li> <li class=""> <a href="./scaffolding.html">Scaffolding</a> </li> <li class=""> <a href="./base-css.html">Base CSS</a> </li> <li class="active"> <a href="./components.html">Components</a> </li> <li class=""> <a href="./javascript.html">JavaScript</a> </li> <li class=""> <a href="./customize.html">Customize</a> </li> </ul> </div> </div> </div> </div>  <header class="jumbotron subhead" id="overview"> <div class="container"> <h1>Components</h1> <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p> </div> </header> <div class="container">  <div class="row"> <div class="span3 bs-docs-sidebar"> <ul class="nav nav-list bs-docs-sidenav"> <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li> <li><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li> <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li> <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li> <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li> <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li> <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li> <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li> <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li> <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li> <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li> <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li> <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li> </ul> </div> <div class="span9">  <section id="dropdowns"> <div class="page-header"> <h1>Dropdown menus</h1> </div> <h2>Example</h2> <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p> <div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> </div> <pre class="prettyprint linenums"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </pre> <h2>Markup</h2> <p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p> <pre class="prettyprint linenums"> <div class="dropdown">  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> </pre> <h2>Options</h2> <p>Align menus to the right and add include additional levels of dropdowns.</p> <h3>Aligning the menus</h3> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <pre class="prettyprint linenums"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul> </pre> <h3>Disabled menu options</h3> <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">Regular link</a></li> <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> <li><a tabindex="-1" href="#">Another link</a></li> </ul> </div> </div> <pre class="prettyprint linenums"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Regular link</a></li> <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> <li><a tabindex="-1" href="#">Another link</a></li> </ul> </pre> <h3>Sub menus on dropdowns</h3> <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p> <div class="bs-docs-example bs-docs-example-submenus"> <div class="pull-left"> <p class="muted">Default</p> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> </ul> </li> </ul> </div> </div> <div class="pull-left"> <p class="muted">Dropup</p> <div class="dropup"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> </ul> </li> </ul> </div> </div> <div class="pull-left"> <p class="muted">Left submenu</p> <div class="dropdown"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> <li><a tabindex="-1" href="#">Second level link</a></li> </ul> </li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> ... </ul> </li> </ul> </pre> </section>  <section id="buttonGroups"> <div class="page-header"> <h1>Button groups</h1> </div> <h2>Examples</h2> <p>Two basic options, along with two more specific variations.</p> <h3>Single button group</h3> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <div class="bs-docs-example"> <div class="btn-group" style="margin: 9px 0 5px;"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> </pre> <h3>Multiple button groups</h3> <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> </div> <div class="btn-group"> <button class="btn">5</button> <button class="btn">6</button> <button class="btn">7</button> </div> <div class="btn-group"> <button class="btn">8</button> </div> </div> </div> <pre class="prettyprint linenums"> <div class="btn-toolbar"> <div class="btn-group"> ... </div> </div> </pre> <h3>Vertical button groups</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <div class="bs-docs-example"> <div class="btn-group btn-group-vertical"> <button type="button" class="btn"><i class="icon-align-left"></i></button> <button type="button" class="btn"><i class="icon-align-center"></i></button> <button type="button" class="btn"><i class="icon-align-right"></i></button> <button type="button" class="btn"><i class="icon-align-justify"></i></button> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group btn-group-vertical"> ... </div> </pre> <hr class="bs-docs-separator"> <h4>Checkbox and radio flavors</h4> <p>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 <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p> <h4>Dropdowns in button groups</h4> <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> </section>  <section id="buttonDropdowns"> <div class="page-header"> <h1>Button dropdown menus</h1> </div> <h2>Overview and examples</h2> <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </a> <ul class="dropdown-menu">  </ul> </div> </pre> <h3>Works with all button sizes</h3> <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <h3>Requires JavaScript</h3> <p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p> <p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.</p> <hr class="bs-docs-separator"> <h2>Split button dropdowns</h2> <p>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.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button class="btn">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-primary">Action</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-danger">Danger</button> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-warning">Warning</button> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-success">Success</button> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-info">Info</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-inverse">Inverse</button> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group"> <button class="btn">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu">  </ul> </div> </pre> <h3>Sizes</h3> <p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p> <div class="bs-docs-example"> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-large">Large action</button> <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-small">Small action</button> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-mini">Mini action</button> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group"> <button class="btn btn-mini">Action</button> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu">  </ul> </div> </pre> <h3>Dropup menus</h3> <p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group dropup"> <button class="btn">Dropup</button> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn primary">Right dropup</button> <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <div class="btn-group dropup"> <button class="btn">Dropup</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu">  </ul> </div> </pre> </section>  <section id="navs"> <div class="page-header"> <h1>Nav: tabs, pills, and lists</small></h1> </div> <h2>Lightweight defaults <small>Same markup, different classes</small></h2> <p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p> <h3>Basic tabs</h3> <p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p> <div class="bs-docs-example"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li class="active"> <a href="#">Home</a> </li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </pre> <h3>Basic pills</h3> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-docs-example"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-pills"> <li class="active"> <a href="#">Home</a> </li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </pre> <h3>Disabled state</h3> <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p> <div class="bs-docs-example"> <ul class="nav nav-pills"> <li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-pills"> ... <li class="disabled"><a href="#">Home</a></li> ... </ul> </pre> <h3>Component alignment</h3> <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> <hr class="bs-docs-separator"> <h2>Stackable</h2> <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p> <h3>Stacked tabs</h3> <div class="bs-docs-example"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-tabs nav-stacked"> ... </ul> </pre> <h3>Stacked pills</h3> <div class="bs-docs-example"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-pills nav-stacked"> ... </ul> </pre> <hr class="bs-docs-separator"> <h2>Dropdowns</h2> <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p> <h3>Tabs with dropdowns</h3> <div class="bs-docs-example"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu">  </ul> </li> </ul> </pre> <h3>Pills with dropdowns</h3> <div class="bs-docs-example"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <pre class="prettyprint linenums"> <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu">  </ul> </li> </ul> </pre> <hr class="bs-docs-separator"> <h2>Nav lists</h2> <p>A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> <h3>Example nav list</h3> <p>Take a list of links and add <code>class="nav nav-list"</code>:</p> <div class="bs-docs-example"> <div class="well" style="max-width: 340px; padding: 8px 0;"> <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li><a href="#">Applications</a></li> <li class="nav-header">Another list header</li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Help</a></li> </ul> </div>  </div> <pre class="prettyprint linenums"> <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Library</a></li> ... </ul> </pre> <p> <span class="label label-info">Note</span> For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code><ul></code>. </p> <h3>Horizontal dividers</h3> <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p> <pre class="prettyprint linenums"> <ul class="nav nav-list"> ... <li class="divider"></li> ... </ul> </pre> <hr class="bs-docs-separator"> <h2>Tabbable nav</h2> <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p> <h3>Tabbable example</h3> <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p> <div class="bs-docs-example"> <div class="tabbable" style="margin-bottom: 18px;"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> <li><a href="#tab3" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>Howdy, I'm in Section 2.</p> </div> <div class="tab-pane" id="tab3"> <p>What up girl, this is Section 3.</p> </div> </div> </div>  </div> <pre class="prettyprint linenums"> <div class="tabbable">  <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>Howdy, I'm in Section 2.</p> </div> </div> </div> </pre> <h4>Fade in tabs</h4> <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p> <h4>Requires jQuery plugin</h4> <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p> <h3>Tabbable in any direction</h3> <h4>Tabs on the bottom</h4> <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> <div class="bs-docs-example"> <div class="tabbable tabs-below"> <div class="tab-content"> <div class="tab-pane active" id="A"> <p>I'm in Section A.</p> </div> <div class="tab-pane" id="B"> <p>Howdy, I'm in Section B.</p> </div> <div class="tab-pane" id="C"> <p>What up girl, this is Section C.</p> </div> </div> <ul class="nav nav-tabs"> <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li> <li><a href="#B" data-toggle="tab">Section 2</a></li> <li><a href="#C" data-toggle="tab">Section 3</a></li> </ul> </div>  </div> <pre class="prettyprint linenums"> <div class="tabbable tabs-below"> <div class="tab-content"> ... </div> <ul class="nav nav-tabs"> ... </ul> </div> </pre> <h4>Tabs on the left</h4> <p>Swap the class to put tabs on the left.</p> <div class="bs-docs-example"> <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li> <li><a href="#lB" data-toggle="tab">Section 2</a></li> <li><a href="#lC" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="lA"> <p>I'm in Section A.</p> </div> <div class="tab-pane" id="lB"> <p>Howdy, I'm in Section B.</p> </div> <div class="tab-pane" id="lC"> <p>What up girl, this is Section C.</p> </div> </div> </div>  </div> <pre class="prettyprint linenums"> <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ... </ul> <div class="tab-content"> ... </div> </div> </pre> <h4>Tabs on the right</h4> <p>Swap the class to put tabs on the right.</p> <div class="bs-docs-example"> <div class="tabbable tabs-right"> <ul class="nav nav-tabs"> <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li> <li><a href="#rB" data-toggle="tab">Section 2</a></li> <li><a href="#rC" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="rA"> <p>I'm in Section A.</p> </div> <div class="tab-pane" id="rB"> <p>Howdy, I'm in Section B.</p> </div> <div class="tab-pane" id="rC"> <p>What up girl, this is Section C.</p> </div> </div> </div>  </div> <pre class="prettyprint linenums"> <div class="tabbable tabs-right"> <ul class="nav nav-tabs"> ... </ul> <div class="tab-content"> ... </div> </div> </pre> </section>  <section id="navbar"> <div class="page-header"> <h1>Navbar</h1> </div> <h2>Basic navbar</h2> <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> <div class="bs-docs-example"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </pre> <hr class="bs-docs-separator"> <h2>Navbar components</h2> <h3>Brand</h3> <p>A simple link to show your brand or project name only requires an anchor tag.</p> <div class="bs-docs-example"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> </div> </div> </div> <pre class="prettyprint linenums"> <a class="brand" href="#">Project name</a> </pre> <h3>Nav links</h3> <p>Nav items are simple to add via unordered lists.</p> <div class="bs-docs-example"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </div> <pre class="prettyprint linenums"> <ul class="nav"> <li class="active"> <a href="#">Home</a> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </pre> <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this b