Left Middle Right   How to use <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> Standard button Default Primary Success Info Warning Danger How to use Standard button <button type="button" class="btn btn-default">Default</button> Provides extra visual weight and identifies the primary action in a set of buttons <button type="button" class="btn btn-primary">Primary</button> Indicates a successful or positive action <button type="button" class="btn btn-success">Success</button> Contextual button for informational alert messages <button type="button" class="btn btn-info">Info</button> Indicates caution should be taken with this action <button type="button" class="btn btn-warning">Warning</button> Indicates a dangerous or potentially negative action <button type="button" class="btn btn-danger">Danger</button> Large button Default button Primary button Success button Info button Warning button Danger button How to use <button type="button" class="btn btn-default btn-lg">Default button</button> <button type="button" class="btn btn-primary btn-lg">Primary button</button> <button type="button" class="btn btn-primary btn-lg btn-success">Success button</button> <button type="button" class="btn btn-primary btn-lg btn-info">Info button</button> <button type="button" class="btn btn-primary btn-lg btn-warning">Warning button</button> <button type="button" class="btn btn-primary btn-lg btn-danger">Danger button</button> Button Default button Primary button Success button Info button Warning button Danger button How to use <button type="button" class="btn btn-default">Default button</button> <button type="button" class="btn btn-primary">Primary button</button> <button type="button" class="btn btn-primary btn-success">Success button</button> <button type="button" class="btn btn-primary btn-info">Info button</button> <button type="button" class="btn btn-primary btn-warning">Warning button</button> <button type="button" class="btn btn-primary btn-danger">Danger button</button> Small button Default button Primary button Success button Info button Warning button Danger button How to use <button type="button" class="btn btn-default btn-sm">Default button</button> <button type="button" class="btn btn-primary btn-sm">Primary button</button> <button type="button" class="btn btn-primary btn-sm btn-success">Success button</button> <button type="button" class="btn btn-primary btn-sm btn-info">Info button</button> <button type="button" class="btn btn-primary btn-sm btn-warning">Warning button</button> <button type="button" class="btn btn-primary btn-sm btn-danger">Danger button</button> Mini button Default button Primary button Success button Info button Warning button Danger button How to use <button type="button" class="btn btn-default btn-xs">Default button</button> <button type="button" class="btn btn-primary btn-xs">Primary button</button> <button type="button" class="btn btn-primary btn-xs btn-succes">Success button</button> <button type="button" class="btn btn-primary btn-xs btn-info">Info button</button> <button type="button" class="btn btn-primary btn-xs btn-warning">Warning button</button> <button type="button" class="btn btn-primary btn-xs btn-danger">Danger button</button> Nested button groups 1 2 Dropdown Dropdown link Dropdown link How to use <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> Single button dropdowns Action Action Another action Something else here Separated link Action Action Another action Something else here Separated link Danger Action Another action Something else here Separated link Warning Action Another action Something else here Separated link Success Action Another action Something else here Separated link How to use <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"> <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> Split button dropdowns Action Action Another action Something else here Separated link Action Action Another action Something else here Separated link Danger Action Another action Something else here Separated link Warning Action Another action Something else here Separated link Success Action Another action Something else here Separated link How to use <div class="btn-group"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default 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> Dropup buttons Dropup Action Another action Something else here Separated link Right dropup Action Another action Something else here Separated link How to use <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"> <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> Buttons instead of text How to use <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> <input type="text" class="form-control"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div> </div> </div> Buttons with dropdowns Action Action Another action Something else here Separated link Action Action Another action Something else here Separated link How to use <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default 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> <input type="text" class="form-control"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <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> </div>

Icons Lots of easy ways to use Font Awesome 11 New Icons fa-rub fa-ruble fa-rouble fa-pagelines fa-stack-exchange fa-arrow-circle-o-right fa-arrow-circle-o-left fa-caret-square-o-left fa-toggle-left fa-dot-circle-o fa-wheelchair fa-vimeo-square fa-try fa-turkish-lira fa-plus-square-o Web Application Icons fa-adjust fa-anchor fa-archive fa-arrows fa-arrows-h fa-arrows-v fa-asterisk fa-ban fa-bar-chart-o fa-barcode fa-bars fa-beer fa-bell fa-bell-o fa-bolt fa-book fa-bookmark fa-bookmark-o fa-briefcase fa-bug fa-building-o fa-bullhorn fa-bullseye fa-calendar fa-calendar-o fa-camera fa-camera-retro fa-caret-square-o-down fa-caret-square-o-left fa-caret-square-o-right fa-caret-square-o-up fa-certificate fa-check fa-check-circle fa-check-circle-o fa-check-square fa-check-square-o fa-circle fa-circle-o fa-clock-o fa-cloud fa-cloud-download fa-cloud-upload fa-code fa-code-fork fa-coffee fa-cog fa-cogs fa-comment fa-comment-o fa-comments fa-comments-o fa-compass fa-credit-card fa-crop fa-crosshairs fa-cutlery fa-dashboard fa-desktop fa-dot-circle-o fa-download fa-edit fa-ellipsis-h fa-ellipsis-v fa-envelope fa-envelope-o fa-eraser fa-exchange fa-exclamation fa-exclamation-circle fa-exclamation-triangle fa-external-link fa-external-link-square fa-eye fa-eye-slash fa-female fa-fighter-jet fa-film fa-filter fa-fire fa-fire-extinguisher fa-flag fa-flag-checkered fa-flag-o fa-flash fa-flask fa-folder fa-folder-o fa-folder-open fa-folder-open-o fa-frown-o fa-gamepad fa-gavel fa-gear fa-gears fa-gift fa-glass fa-globe fa-group fa-hdd-o fa-headphones fa-heart fa-heart-o fa-home fa-inbox fa-info fa-info-circle fa-key fa-keyboard-o fa-laptop fa-leaf fa-legal fa-lemon-o fa-level-down fa-level-up fa-lightbulb-o fa-location-arrow fa-lock fa-magic fa-magnet fa-mail-forward fa-mail-reply fa-mail-reply-all fa-male fa-map-marker fa-meh-o fa-microphone fa-microphone-slash fa-minus fa-minus-circle fa-minus-square fa-minus-square-o fa-mobile fa-mobile-phone fa-money fa-moon-o fa-music fa-pencil fa-pencil-square fa-pencil-square-o fa-phone fa-phone-square fa-picture-o fa-plane fa-plus fa-plus-circle fa-plus-square fa-plus-square-o fa-power-off fa-print fa-puzzle-piece fa-qrcode fa-question fa-question-circle fa-quote-left fa-quote-right fa-random fa-refresh fa-reply fa-reply-all fa-retweet fa-road fa-rocket fa-rss fa-rss-square fa-search fa-search-minus fa-search-plus fa-share fa-share-square fa-share-square-o fa-shield fa-shopping-cart fa-sign-in fa-sign-out fa-signal fa-sitemap fa-smile-o fa-sort fa-sort-alpha-asc fa-sort-alpha-desc fa-sort-amount-asc fa-sort-amount-desc fa-sort-asc fa-sort-desc fa-sort-down fa-sort-numeric-asc fa-sort-numeric-desc fa-sort-up fa-spinner fa-square fa-square-o fa-star fa-star-half fa-star-half-empty fa-star-half-full fa-star-half-o fa-star-o fa-subscript fa-suitcase fa-sun-o fa-superscript fa-tablet fa-tachometer fa-tag fa-tags fa-tasks fa-terminal fa-thumb-tack fa-thumbs-down fa-thumbs-o-down fa-thumbs-o-up fa-thumbs-up fa-ticket fa-times fa-times-circle fa-times-circle-o fa-tint fa-toggle-down fa-toggle-left fa-toggle-right fa-toggle-up fa-trash-o fa-trophy fa-truck fa-umbrella fa-unlock fa-unlock-alt fa-unsorted fa-upload fa-user fa-users fa-video-camera fa-volume-down fa-volume-off fa-volume-up fa-warning fa-wheelchair fa-wrench Form Control Icons fa-check-square fa-check-square-o fa-circle fa-circle-o fa-dot-circle-o fa-minus-square fa-minus-square-o fa-plus-square fa-plus-square-o fa-square fa-square-o Currency Icons fa-bitcoin fa-btc fa-cny fa-dollar fa-eur fa-euro fa-gbp fa-inr fa-jpy fa-krw fa-money fa-rmb fa-rouble fa-rub fa-ruble fa-rupee fa-try fa-turkish-lira fa-usd fa-won fa-yen Text Editor Icons fa-align-center fa-align-justify fa-align-left fa-align-right fa-bold fa-chain fa-chain-broken fa-clipboard fa-columns fa-copy fa-cut fa-dedent fa-eraser fa-file fa-file-o fa-file-text fa-file-text-o fa-files-o fa-floppy-o fa-font fa-indent fa-italic fa-link fa-list fa-list-alt fa-list-ol fa-list-ul fa-outdent fa-paperclip fa-paste fa-repeat fa-rotate-left fa-rotate-right fa-save fa-scissors fa-strikethrough fa-table fa-text-height fa-text-width fa-th fa-th-large fa-th-list fa-underline fa-undo fa-unlink Directional Icons fa-angle-double-down fa-angle-double-left fa-angle-double-right fa-angle-double-up fa-angle-down fa-angle-left fa-angle-right fa-angle-up fa-arrow-circle-down fa-arrow-circle-left fa-arrow-circle-o-down fa-arrow-circle-o-left fa-arrow-circle-o-right fa-arrow-circle-o-up fa-arrow-circle-right fa-arrow-circle-up fa-arrow-down fa-arrow-left fa-arrow-right fa-arrow-up fa-arrows fa-arrows-alt fa-arrows-h fa-arrows-v fa-caret-down fa-caret-left fa-caret-right fa-caret-square-o-down fa-caret-square-o-left fa-caret-square-o-right fa-caret-square-o-up fa-caret-up fa-chevron-circle-down fa-chevron-circle-left fa-chevron-circle-right fa-chevron-circle-up fa-chevron-down fa-chevron-left fa-chevron-right fa-chevron-up fa-hand-o-down fa-hand-o-left fa-hand-o-right fa-hand-o-up fa-long-arrow-down fa-long-arrow-left fa-long-arrow-right fa-long-arrow-up fa-toggle-down fa-toggle-left fa-toggle-right fa-toggle-up Video Player Icons fa-arrows-alt fa-backward fa-compress fa-eject fa-expand fa-fast-backward fa-fast-forward fa-forward fa-pause fa-play fa-play-circle fa-play-circle-o fa-step-backward fa-step-forward fa-stop fa-youtube-play Brand Icons fa-adn fa-android fa-apple fa-bitbucket fa-bitbucket-square fa-bitcoin fa-btc fa-css3 fa-dribbble fa-dropbox fa-facebook fa-facebook-square fa-flickr fa-foursquare fa-github fa-github-alt fa-github-square fa-gittip fa-google-plus fa-google-plus-square fa-html5 fa-instagram fa-linkedin fa-linkedin-square fa-linux fa-maxcdn fa-pagelines fa-pinterest fa-pinterest-square fa-renren fa-skype fa-stack-exchange fa-stack-overflow fa-trello fa-tumblr fa-tumblr-square fa-twitter fa-twitter-square fa-vimeo-square fa-vk fa-weibo fa-windows fa-xing fa-xing-square fa-youtube fa-youtube-play fa-youtube-square Medical Icons fa-ambulance fa-h-square fa-hospital-o fa-medkit fa-plus-square fa-stethoscope fa-user-md fa-wheelchair How to use <i class="fa fa-tumblr-square"></i>

Labels Default Primary Success Info Warning Danger How to use <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> Badges Home 42 Profile Messages 3 42 Home Profile 3 Messages Messages 4 How to use <ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> <br> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> <li><a href="#">Profile</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> Messages </a> </li> </ul> <br> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>

Tabs Home Profile Dropdown @fat @mdo Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan. // How to use <div class="bs-example bs-example-tabs"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="#dropdown1" data-toggle="tab">@fat</a></li> <li class=""><a href="#dropdown2" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="home"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> <div class="tab-pane fade" id="profile"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> <div class="tab-pane fade" id="dropdown1"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> <div class="tab-pane fade" id="dropdown2"> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> </div> </div> </div> <script> jQuerOs('#myTab a').click(function (e) { e.preventDefault(); jQuerOs(this).tab('show'); }) jQuerOs('#myTab a[href="#profile"]').tab('show'); // Select tab by name jQuerOs('#myTab a:first').tab('show'); // Select first tab jQuerOs('#myTab a:last').tab('show'); // Select last tab jQuerOs('#myTab li:eq(0) a').tab('show'); // Select third tab (0-indexed) </script> Accordion Collapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Collapsible Group Item #2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Collapsible Group Item #3 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. How to use <div class="panel-group" id="accordion"> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse40"> Collapsible Group Item #1 </a> </h3> </div> <div id="collapse40" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h3> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h3> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>

Success Well done! You successfully read this important alert message. How to use <div class="alert alert-success">Well done! You successfully read this important alert message.</div> Info Heads up! This alert needs your attention, but it's not super important. How to use <div class="alert alert-info">Heads up! This alert needs your attention, but it's not super important.</div> Warning Warning! Better check yourself, you're not looking too good. How to use <div class="alert alert-warning">Warning! Better check yourself, you're not looking too good.</div> Danger Oh snap! Change a few things up and try submitting again. How to use <div class="alert alert-warning">Warning! Better check yourself, you're not looking too good.</div>

Basic 60% Complete How to use <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> With label 60% How to use <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> Contextual alternatives 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete How to use <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete</span> </div> </div> Striped 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger) How to use <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> Animated 45% Complete How to use <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> Stacked 35% Complete (success) 20% Complete (warning) 10% Complete (danger) How to use <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>

// Tooltip Tooltip on left  Tooltip on top  Tooltip on bottom   Tooltip on right  How to use <button type="button" class="btn btn-default" id="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <script type='text/javascript'> jQuerOs(document).ready(function(){ jQuerOs("#left").tooltip({ placement : 'left'}); }); </script> Popover // Click to toggle popover top Click to toggle popover right Click to toggle popover bottom Click to toggle popover left How to use <script type='text/javascript'> jQuerOs(document).ready(function(){ jQuerOs(".DemoBS a").popover({ placement : 'top' }); }); </script> <div class="DemoBS"> <div class="btn btn-md btn-danger" data-toggle="popover" title="PopOver Demo" data-content="The size of the pop over depends upon the text area" role="button">Click to toggle popover top</div> </div>

Launch demo modal × Modal title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Close Save changes How to use <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>