thalassa-aqueduct

--- layout: default title: Components slug: components lead: "Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more." base_url: "../" ---  <div class="bs-docs-section"> <div class="page-header"> <h1 id="glyphicons">Glyphicons</h1> </div> <h2 id="glyphicons-glyphs">Available glyphs</h2> <p>Includes 180 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> <ul class="bs-glyphicons"> <li><span class="glyphicon glyphicon-adjust"></span> .glyphicon .glyphicon-adjust</li> <li><span class="glyphicon glyphicon-align-center"></span> .glyphicon .glyphicon-align-center</li> <li><span class="glyphicon glyphicon-align-justify"></span> .glyphicon .glyphicon-align-justify</li> <li><span class="glyphicon glyphicon-align-left"></span> .glyphicon .glyphicon-align-left</li> <li><span class="glyphicon glyphicon-align-right"></span> .glyphicon .glyphicon-align-right</li> <li><span class="glyphicon glyphicon-arrow-down"></span> .glyphicon .glyphicon-arrow-down</li> <li><span class="glyphicon glyphicon-arrow-left"></span> .glyphicon .glyphicon-arrow-left</li> <li><span class="glyphicon glyphicon-arrow-right"></span> .glyphicon .glyphicon-arrow-right</li> <li><span class="glyphicon glyphicon-arrow-up"></span> .glyphicon .glyphicon-arrow-up</li> <li><span class="glyphicon glyphicon-asterisk"></span> .glyphicon .glyphicon-asterisk</li> <li><span class="glyphicon glyphicon-backward"></span> .glyphicon .glyphicon-backward</li> <li><span class="glyphicon glyphicon-ban-circle"></span> .glyphicon .glyphicon-ban-circle</li> <li><span class="glyphicon glyphicon-barcode"></span> .glyphicon .glyphicon-barcode</li> <li><span class="glyphicon glyphicon-bell"></span> .glyphicon .glyphicon-bell</li> <li><span class="glyphicon glyphicon-bold"></span> .glyphicon .glyphicon-bold</li> <li><span class="glyphicon glyphicon-book"></span> .glyphicon .glyphicon-book</li> <li><span class="glyphicon glyphicon-bookmark"></span> .glyphicon .glyphicon-bookmark</li> <li><span class="glyphicon glyphicon-briefcase"></span> .glyphicon .glyphicon-briefcase</li> <li><span class="glyphicon glyphicon-bullhorn"></span> .glyphicon .glyphicon-bullhorn</li> <li><span class="glyphicon glyphicon-calendar"></span> .glyphicon .glyphicon-calendar</li> <li><span class="glyphicon glyphicon-camera"></span> .glyphicon .glyphicon-camera</li> <li><span class="glyphicon glyphicon-certificate"></span> .glyphicon .glyphicon-certificate</li> <li><span class="glyphicon glyphicon-check"></span> .glyphicon .glyphicon-check</li> <li><span class="glyphicon glyphicon-chevron-down"></span> .glyphicon .glyphicon-chevron-down</li> <li><span class="glyphicon glyphicon-chevron-left"></span> .glyphicon .glyphicon-chevron-left</li> <li><span class="glyphicon glyphicon-chevron-right"></span> .glyphicon .glyphicon-chevron-right</li> <li><span class="glyphicon glyphicon-chevron-up"></span> .glyphicon .glyphicon-chevron-up</li> <li><span class="glyphicon glyphicon-circle-arrow-down"></span> .glyphicon .glyphicon-circle-arrow-down</li> <li><span class="glyphicon glyphicon-circle-arrow-left"></span> .glyphicon .glyphicon-circle-arrow-left</li> <li><span class="glyphicon glyphicon-circle-arrow-right"></span> .glyphicon .glyphicon-circle-arrow-right</li> <li><span class="glyphicon glyphicon-circle-arrow-up"></span> .glyphicon .glyphicon-circle-arrow-up</li> <li><span class="glyphicon glyphicon-cloud"></span> .glyphicon .glyphicon-cloud</li> <li><span class="glyphicon glyphicon-cloud-download"></span> .glyphicon .glyphicon-cloud-download</li> <li><span class="glyphicon glyphicon-cloud-upload"></span> .glyphicon .glyphicon-cloud-upload</li> <li><span class="glyphicon glyphicon-cog"></span> .glyphicon .glyphicon-cog</li> <li><span class="glyphicon glyphicon-collapse-down"></span> .glyphicon .glyphicon-collapse-down</li> <li><span class="glyphicon glyphicon-collapse-up"></span> .glyphicon .glyphicon-collapse-up</li> <li><span class="glyphicon glyphicon-comment"></span> .glyphicon .glyphicon-comment</li> <li><span class="glyphicon glyphicon-compressed"></span> .glyphicon .glyphicon-compressed</li> <li><span class="glyphicon glyphicon-copyright-mark"></span> .glyphicon .glyphicon-copyright-mark</li> <li><span class="glyphicon glyphicon-credit-card"></span> .glyphicon .glyphicon-credit-card</li> <li><span class="glyphicon glyphicon-cutlery"></span> .glyphicon .glyphicon-cutlery</li> <li><span class="glyphicon glyphicon-dashboard"></span> .glyphicon .glyphicon-dashboard</li> <li><span class="glyphicon glyphicon-download"></span> .glyphicon .glyphicon-download</li> <li><span class="glyphicon glyphicon-download-alt"></span> .glyphicon .glyphicon-download-alt</li> <li><span class="glyphicon glyphicon-earphone"></span> .glyphicon .glyphicon-earphone</li> <li><span class="glyphicon glyphicon-edit"></span> .glyphicon .glyphicon-edit</li> <li><span class="glyphicon glyphicon-eject"></span> .glyphicon .glyphicon-eject</li> <li><span class="glyphicon glyphicon-envelope"></span> .glyphicon .glyphicon-envelope</li> <li><span class="glyphicon glyphicon-euro"></span> .glyphicon .glyphicon-euro</li> <li><span class="glyphicon glyphicon-exclamation-sign"></span> .glyphicon .glyphicon-exclamation-sign</li> <li><span class="glyphicon glyphicon-expand"></span> .glyphicon .glyphicon-expand</li> <li><span class="glyphicon glyphicon-export"></span> .glyphicon .glyphicon-export</li> <li><span class="glyphicon glyphicon-eye-close"></span> .glyphicon .glyphicon-eye-close</li> <li><span class="glyphicon glyphicon-eye-open"></span> .glyphicon .glyphicon-eye-open</li> <li><span class="glyphicon glyphicon-facetime-video"></span> .glyphicon .glyphicon-facetime-video</li> <li><span class="glyphicon glyphicon-fast-backward"></span> .glyphicon .glyphicon-fast-backward</li> <li><span class="glyphicon glyphicon-fast-forward"></span> .glyphicon .glyphicon-fast-forward</li> <li><span class="glyphicon glyphicon-file"></span> .glyphicon .glyphicon-file</li> <li><span class="glyphicon glyphicon-film"></span> .glyphicon .glyphicon-film</li> <li><span class="glyphicon glyphicon-filter"></span> .glyphicon .glyphicon-filter</li> <li><span class="glyphicon glyphicon-fire"></span> .glyphicon .glyphicon-fire</li> <li><span class="glyphicon glyphicon-flag"></span> .glyphicon .glyphicon-flag</li> <li><span class="glyphicon glyphicon-flash"></span> .glyphicon .glyphicon-flash</li> <li><span class="glyphicon glyphicon-floppy-disk"></span> .glyphicon .glyphicon-floppy-disk</li> <li><span class="glyphicon glyphicon-floppy-open"></span> .glyphicon .glyphicon-floppy-open</li> <li><span class="glyphicon glyphicon-floppy-remove"></span> .glyphicon .glyphicon-floppy-remove</li> <li><span class="glyphicon glyphicon-floppy-save"></span> .glyphicon .glyphicon-floppy-save</li> <li><span class="glyphicon glyphicon-floppy-saved"></span> .glyphicon .glyphicon-floppy-saved</li> <li><span class="glyphicon glyphicon-folder-close"></span> .glyphicon .glyphicon-folder-close</li> <li><span class="glyphicon glyphicon-folder-open"></span> .glyphicon .glyphicon-folder-open</li> <li><span class="glyphicon glyphicon-font"></span> .glyphicon .glyphicon-font</li> <li><span class="glyphicon glyphicon-forward"></span> .glyphicon .glyphicon-forward</li> <li><span class="glyphicon glyphicon-fullscreen"></span> .glyphicon .glyphicon-fullscreen</li> <li><span class="glyphicon glyphicon-gbp"></span> .glyphicon .glyphicon-gbp</li> <li><span class="glyphicon glyphicon-gift"></span> .glyphicon .glyphicon-gift</li> <li><span class="glyphicon glyphicon-glass"></span> .glyphicon .glyphicon-glass</li> <li><span class="glyphicon glyphicon-globe"></span> .glyphicon .glyphicon-globe</li> <li><span class="glyphicon glyphicon-hand-down"></span> .glyphicon .glyphicon-hand-down</li> <li><span class="glyphicon glyphicon-hand-left"></span> .glyphicon .glyphicon-hand-left</li> <li><span class="glyphicon glyphicon-hand-right"></span> .glyphicon .glyphicon-hand-right</li> <li><span class="glyphicon glyphicon-hand-up"></span> .glyphicon .glyphicon-hand-up</li> <li><span class="glyphicon glyphicon-hd-video"></span> .glyphicon .glyphicon-hd-video</li> <li><span class="glyphicon glyphicon-hdd"></span> .glyphicon .glyphicon-hdd</li> <li><span class="glyphicon glyphicon-header"></span> .glyphicon .glyphicon-header</li> <li><span class="glyphicon glyphicon-headphones"></span> .glyphicon .glyphicon-headphones</li> <li><span class="glyphicon glyphicon-heart"></span> .glyphicon .glyphicon-heart</li> <li><span class="glyphicon glyphicon-heart-empty"></span> .glyphicon .glyphicon-heart-empty</li> <li><span class="glyphicon glyphicon-home"></span> .glyphicon .glyphicon-home</li> <li><span class="glyphicon glyphicon-import"></span> .glyphicon .glyphicon-import</li> <li><span class="glyphicon glyphicon-inbox"></span> .glyphicon .glyphicon-inbox</li> <li><span class="glyphicon glyphicon-indent-left"></span> .glyphicon .glyphicon-indent-left</li> <li><span class="glyphicon glyphicon-indent-right"></span> .glyphicon .glyphicon-indent-right</li> <li><span class="glyphicon glyphicon-info-sign"></span> .glyphicon .glyphicon-info-sign</li> <li><span class="glyphicon glyphicon-italic"></span> .glyphicon .glyphicon-italic</li> <li><span class="glyphicon glyphicon-leaf"></span> .glyphicon .glyphicon-leaf</li> <li><span class="glyphicon glyphicon-link"></span> .glyphicon .glyphicon-link</li> <li><span class="glyphicon glyphicon-list"></span> .glyphicon .glyphicon-list</li> <li><span class="glyphicon glyphicon-list-alt"></span> .glyphicon .glyphicon-list-alt</li> <li><span class="glyphicon glyphicon-lock"></span> .glyphicon .glyphicon-lock</li> <li><span class="glyphicon glyphicon-log-in"></span> .glyphicon .glyphicon-log-in</li> <li><span class="glyphicon glyphicon-log-out"></span> .glyphicon .glyphicon-log-out</li> <li><span class="glyphicon glyphicon-magnet"></span> .glyphicon .glyphicon-magnet</li> <li><span class="glyphicon glyphicon-map-marker"></span> .glyphicon .glyphicon-map-marker</li> <li><span class="glyphicon glyphicon-minus"></span> .glyphicon .glyphicon-minus</li> <li><span class="glyphicon glyphicon-minus-sign"></span> .glyphicon .glyphicon-minus-sign</li> <li><span class="glyphicon glyphicon-move"></span> .glyphicon .glyphicon-move</li> <li><span class="glyphicon glyphicon-music"></span> .glyphicon .glyphicon-music</li> <li><span class="glyphicon glyphicon-new-window"></span> .glyphicon .glyphicon-new-window</li> <li><span class="glyphicon glyphicon-off"></span> .glyphicon .glyphicon-off</li> <li><span class="glyphicon glyphicon-ok"></span> .glyphicon .glyphicon-ok</li> <li><span class="glyphicon glyphicon-ok-circle"></span> .glyphicon .glyphicon-ok-circle</li> <li><span class="glyphicon glyphicon-ok-sign"></span> .glyphicon .glyphicon-ok-sign</li> <li><span class="glyphicon glyphicon-open"></span> .glyphicon .glyphicon-open</li> <li><span class="glyphicon glyphicon-paperclip"></span> .glyphicon .glyphicon-paperclip</li> <li><span class="glyphicon glyphicon-pause"></span> .glyphicon .glyphicon-pause</li> <li><span class="glyphicon glyphicon-pencil"></span> .glyphicon .glyphicon-pencil</li> <li><span class="glyphicon glyphicon-phone"></span> .glyphicon .glyphicon-phone</li> <li><span class="glyphicon glyphicon-phone-alt"></span> .glyphicon .glyphicon-phone-alt</li> <li><span class="glyphicon glyphicon-picture"></span> .glyphicon .glyphicon-picture</li> <li><span class="glyphicon glyphicon-plane"></span> .glyphicon .glyphicon-plane</li> <li><span class="glyphicon glyphicon-play"></span> .glyphicon .glyphicon-play</li> <li><span class="glyphicon glyphicon-play-circle"></span> .glyphicon .glyphicon-play-circle</li> <li><span class="glyphicon glyphicon-plus"></span> .glyphicon .glyphicon-plus</li> <li><span class="glyphicon glyphicon-plus-sign"></span> .glyphicon .glyphicon-plus-sign</li> <li><span class="glyphicon glyphicon-print"></span> .glyphicon .glyphicon-print</li> <li><span class="glyphicon glyphicon-pushpin"></span> .glyphicon .glyphicon-pushpin</li> <li><span class="glyphicon glyphicon-qrcode"></span> .glyphicon .glyphicon-qrcode</li> <li><span class="glyphicon glyphicon-question-sign"></span> .glyphicon .glyphicon-question-sign</li> <li><span class="glyphicon glyphicon-random"></span> .glyphicon .glyphicon-random</li> <li><span class="glyphicon glyphicon-record"></span> .glyphicon .glyphicon-record</li> <li><span class="glyphicon glyphicon-refresh"></span> .glyphicon .glyphicon-refresh</li> <li><span class="glyphicon glyphicon-registration-mark"></span> .glyphicon .glyphicon-registration-mark</li> <li><span class="glyphicon glyphicon-remove"></span> .glyphicon .glyphicon-remove</li> <li><span class="glyphicon glyphicon-remove-circle"></span> .glyphicon .glyphicon-remove-circle</li> <li><span class="glyphicon glyphicon-remove-sign"></span> .glyphicon .glyphicon-remove-sign</li> <li><span class="glyphicon glyphicon-repeat"></span> .glyphicon .glyphicon-repeat</li> <li><span class="glyphicon glyphicon-resize-full"></span> .glyphicon .glyphicon-resize-full</li> <li><span class="glyphicon glyphicon-resize-horizontal"></span> .glyphicon .glyphicon-resize-horizontal</li> <li><span class="glyphicon glyphicon-resize-small"></span> .glyphicon .glyphicon-resize-small</li> <li><span class="glyphicon glyphicon-resize-vertical"></span> .glyphicon .glyphicon-resize-vertical</li> <li><span class="glyphicon glyphicon-retweet"></span> .glyphicon .glyphicon-retweet</li> <li><span class="glyphicon glyphicon-road"></span> .glyphicon .glyphicon-road</li> <li><span class="glyphicon glyphicon-save"></span> .glyphicon .glyphicon-save</li> <li><span class="glyphicon glyphicon-saved"></span> .glyphicon .glyphicon-saved</li> <li><span class="glyphicon glyphicon-screenshot"></span> .glyphicon .glyphicon-screenshot</li> <li><span class="glyphicon glyphicon-sd-video"></span> .glyphicon .glyphicon-sd-video</li> <li><span class="glyphicon glyphicon-search"></span> .glyphicon .glyphicon-search</li> <li><span class="glyphicon glyphicon-send"></span> .glyphicon .glyphicon-send</li> <li><span class="glyphicon glyphicon-share"></span> .glyphicon .glyphicon-share</li> <li><span class="glyphicon glyphicon-share-alt"></span> .glyphicon .glyphicon-share-alt</li> <li><span class="glyphicon glyphicon-shopping-cart"></span> .glyphicon .glyphicon-shopping-cart</li> <li><span class="glyphicon glyphicon-signal"></span> .glyphicon .glyphicon-signal</li> <li><span class="glyphicon glyphicon-sort"></span> .glyphicon .glyphicon-sort</li> <li><span class="glyphicon glyphicon-sort-by-alphabet"></span> .glyphicon .glyphicon-sort-by-alphabet</li> <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> .glyphicon .glyphicon-sort-by-alphabet-alt</li> <li><span class="glyphicon glyphicon-sort-by-attributes"></span> .glyphicon .glyphicon-sort-by-attributes</li> <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> .glyphicon .glyphicon-sort-by-attributes-alt</li> <li><span class="glyphicon glyphicon-sort-by-order"></span> .glyphicon .glyphicon-sort-by-order</li> <li><span class="glyphicon glyphicon-sort-by-order-alt"></span> .glyphicon .glyphicon-sort-by-order-alt</li> <li><span class="glyphicon glyphicon-sound-5-1"></span> .glyphicon .glyphicon-sound-5-1</li> <li><span class="glyphicon glyphicon-sound-6-1"></span> .glyphicon .glyphicon-sound-6-1</li> <li><span class="glyphicon glyphicon-sound-7-1"></span> .glyphicon .glyphicon-sound-7-1</li> <li><span class="glyphicon glyphicon-sound-dolby"></span> .glyphicon .glyphicon-sound-dolby</li> <li><span class="glyphicon glyphicon-sound-stereo"></span> .glyphicon .glyphicon-sound-stereo</li> <li><span class="glyphicon glyphicon-star"></span> .glyphicon .glyphicon-star</li> <li><span class="glyphicon glyphicon-star-empty"></span> .glyphicon .glyphicon-star-empty</li> <li><span class="glyphicon glyphicon-stats"></span> .glyphicon .glyphicon-stats</li> <li><span class="glyphicon glyphicon-step-backward"></span> .glyphicon .glyphicon-step-backward</li> <li><span class="glyphicon glyphicon-step-forward"></span> .glyphicon .glyphicon-step-forward</li> <li><span class="glyphicon glyphicon-stop"></span> .glyphicon .glyphicon-stop</li> <li><span class="glyphicon glyphicon-subtitles"></span> .glyphicon .glyphicon-subtitles</li> <li><span class="glyphicon glyphicon-tag"></span> .glyphicon .glyphicon-tag</li> <li><span class="glyphicon glyphicon-tags"></span> .glyphicon .glyphicon-tags</li> <li><span class="glyphicon glyphicon-tasks"></span> .glyphicon .glyphicon-tasks</li> <li><span class="glyphicon glyphicon-text-height"></span> .glyphicon .glyphicon-text-height</li> <li><span class="glyphicon glyphicon-text-width"></span> .glyphicon .glyphicon-text-width</li> <li><span class="glyphicon glyphicon-th"></span> .glyphicon .glyphicon-th</li> <li><span class="glyphicon glyphicon-th-large"></span> .glyphicon .glyphicon-th-large</li> <li><span class="glyphicon glyphicon-th-list"></span> .glyphicon .glyphicon-th-list</li> <li><span class="glyphicon glyphicon-thumbs-down"></span> .glyphicon .glyphicon-thumbs-down</li> <li><span class="glyphicon glyphicon-thumbs-up"></span> .glyphicon .glyphicon-thumbs-up</li> <li><span class="glyphicon glyphicon-time"></span> .glyphicon .glyphicon-time</li> <li><span class="glyphicon glyphicon-tint"></span> .glyphicon .glyphicon-tint</li> <li><span class="glyphicon glyphicon-tower"></span> .glyphicon .glyphicon-tower</li> <li><span class="glyphicon glyphicon-transfer"></span> .glyphicon .glyphicon-transfer</li> <li><span class="glyphicon glyphicon-trash"></span> .glyphicon .glyphicon-trash</li> <li><span class="glyphicon glyphicon-tree-conifer"></span> .glyphicon .glyphicon-tree-conifer</li> <li><span class="glyphicon glyphicon-tree-deciduous"></span> .glyphicon .glyphicon-tree-deciduous</li> <li><span class="glyphicon glyphicon-unchecked"></span> .glyphicon .glyphicon-unchecked</li> <li><span class="glyphicon glyphicon-upload"></span> .glyphicon .glyphicon-upload</li> <li><span class="glyphicon glyphicon-usd"></span> .glyphicon .glyphicon-usd</li> <li><span class="glyphicon glyphicon-user"></span> .glyphicon .glyphicon-user</li> <li><span class="glyphicon glyphicon-volume-down"></span> .glyphicon .glyphicon-volume-down</li> <li><span class="glyphicon glyphicon-volume-off"></span> .glyphicon .glyphicon-volume-off</li> <li><span class="glyphicon glyphicon-volume-up"></span> .glyphicon .glyphicon-volume-up</li> <li><span class="glyphicon glyphicon-warning-sign"></span> .glyphicon .glyphicon-warning-sign</li> <li><span class="glyphicon glyphicon-wrench"></span> .glyphicon .glyphicon-wrench</li> <li><span class="glyphicon glyphicon-zoom-in"></span> .glyphicon .glyphicon-zoom-in</li> <li><span class="glyphicon glyphicon-zoom-out"></span> .glyphicon .glyphicon-zoom-out</li> </ul> <h2 id="glyphicons-how-to-use">How to use</h2> <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> {% highlight html %} <span class="glyphicon glyphicon-search"></span> {% endhighlight %} <h2 id="glyphicons-examples">Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class="bs-example"> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> </div> <div class="btn-toolbar"> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button> </div> </div> {% highlight html %} <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button> {% endhighlight %} </div>  <div class="bs-docs-section"> <div class="page-header"> <h1 id="dropdowns">Dropdowns</h1> </div> <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> <h3 id="dropdowns-example">Example</h3> <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> <div class="bs-example"> <div class="dropdown clearfix"> <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> </div> {% highlight html %} <div class="dropdown">  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> {% endhighlight %} <h3 id="dropdowns-alignment">Aligninment options</h3> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> {% highlight html %} <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul> {% endhighlight %} <h3 id="dropdowns-headers">Headers</h3> <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> <a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> </div> {% highlight html %} <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> ... </ul> {% endhighlight %} <h3 id="dropdowns-disabled">Disabled menu items</h3> <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> <a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> </ul> </div> </div> {% highlight html %} <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> </ul> {% endhighlight %} </div>  <div class="bs-docs-section"> <div class="page-header"> <h1 id="btn-groups">Button groups</h1> </div> <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/#buttons">our buttons plugin</a>.</p> <div class="bs-callout bs-callout-info"> <h4>Tooltips & popovers in button groups require special setting</h4> <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> </div> <h3 id="btn-groups-single">Basic example</h3> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <div class="bs-example"> <div class="btn-group" style="margin: 9px 0 5px;"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> {% highlight html %} <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> {% endhighlight %} <h3 id="btn-groups-toolbar">Button toolbar</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-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">8</button> </div> </div> </div> {% highlight html %} <div class="btn-toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> {% endhighlight %} <h3 id="btn-groups-sizing">Sizing</h3> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> <div class="bs-example"> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <div class="btn-toolbar"> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <div class="btn-toolbar"> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> </div> {% highlight html %} <div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div> {% endhighlight %} <h3 id="btn-groups-nested">Nesting</h3> <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> {% highlight html %} <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> {% endhighlight %} <h3 id="btn-groups-vertical">Vertical variation</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <div class="bs-example"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> {% highlight html %} <div class="btn-group-vertical"> ... </div> {% endhighlight %} <h3 id="btn-groups-justified">Justified link variation</h3> <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p> <div class="bs-callout bs-callout-warning"> <h4>Element-specific usage</h4> <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up these styles.</p> </div> <div class="bs-example"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div> </div> {% highlight html %} <div class="btn-group btn-group-justified"> ... </div> {% endhighlight %} </div>  <div class="bs-docs-section"> <div class="page-header"> <h1 id="btn-dropdowns">Button dropdowns</h1> </div> <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> <div class="bs-callout bs-callout-danger"> <h4>Plugin dependency</h4> <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p> </div> <h3 id="btn-dropdowns-single">Single button dropdowns</h3> <p>Turn a button into a dropdown toggle with some basic markup changes.</p> <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <ul class="dropdown-menu" role="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> {% highlight html %}  <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> {% endhighlight %} <h3 id="btn-dropdowns-split">Split button dropdowns</h3> <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p> <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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> {% highlight html %}  <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> {% endhighlight %} <h3 id="btn-dropdowns-sizing">Sizing</h3> <p>Button dropdowns work with buttons of all sizes.</p> <div class="bs-example"> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="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-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="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-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> {% highlight html %}  <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div>  <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div>  <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> {% endhighlight %} <h3 id="btn-dropdowns-dropup">Dropup variation</h3> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <div class="bs-example"> <div class="btn-toolbar"> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="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 type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu pull-right" role="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> {% highlight html %} <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu">  </ul> </div> {% endhighlight %} </div>  <div class="bs-docs-section"> <div class="page-header"> <h1 id="input-groups">Input groups</h1> </div> <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a <code>.form-control</code>.</p> <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p> </div> <div class="bs-callout bs-callout-info"> <h4>Tooltips & popovers in input groups require special setting</h4> <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll