-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> About · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=history>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on <a href=https://twitter.com/mdo/statuses/104620039650557952><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=team>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a href=https://github.com/mdo class=team-member> <img alt="@mdo avatar" height=32 src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" width=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a href=https://github.com/fat class=team-member> <img alt="@fat avatar" height=32 src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" width=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a href=https://github.com/cvrebert class=team-member> <img alt="@cvrebert avatar" height=32 src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" width=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a href=https://github.com/juthilo class=team-member> <img alt="@juthilo avatar" height=32 src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" width=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a href=https://github.com/xhmikosr class=team-member> <img alt="@xhmikosr avatar" height=32 src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" width=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a href=https://github.com/hnrch02 class=team-member> <img alt="@hnrch02 avatar" height=32 src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" width=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a href=https://github.com/patrickhlauke class=team-member> <img alt="@patrickhlauke avatar" height=32 src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" width=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a href=https://github.com/thomas-mcdonald class=team-member> <img alt="@thomas-mcdonald avatar" height=32 src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" width=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a href=https://github.com/glebm class=team-member> <img alt="@glebm avatar" height=32 src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" width=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=brand>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-solid.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-outline.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-punchout.svg width=144 class=svg> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> About · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=history>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on <a href=https://twitter.com/mdo/statuses/104620039650557952><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=team>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a href=https://github.com/mdo class=team-member> <img alt="@mdo avatar" height=32 src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" width=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a href=https://github.com/fat class=team-member> <img alt="@fat avatar" height=32 src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" width=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a href=https://github.com/cvrebert class=team-member> <img alt="@cvrebert avatar" height=32 src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" width=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a href=https://github.com/juthilo class=team-member> <img alt="@juthilo avatar" height=32 src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" width=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a href=https://github.com/xhmikosr class=team-member> <img alt="@xhmikosr avatar" height=32 src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" width=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a href=https://github.com/hnrch02 class=team-member> <img alt="@hnrch02 avatar" height=32 src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" width=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a href=https://github.com/patrickhlauke class=team-member> <img alt="@patrickhlauke avatar" height=32 src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" width=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a href=https://github.com/thomas-mcdonald class=team-member> <img alt="@thomas-mcdonald avatar" height=32 src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" width=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a href=https://github.com/glebm class=team-member> <img alt="@glebm avatar" height=32 src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" width=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=brand>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-solid.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-outline.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-punchout.svg width=144 class=svg> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
- */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -15px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:0 0!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px;border:none}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.v4-tease{display:block;padding:15px 20px;font-weight:700;color:#fff;text-align:center;background-color:#0275d8}.v4-tease:hover{color:#fff;text-decoration:none;background-color:#0269c2}@media print{a[href]:after{content:""!important}}
+ */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbon-poweredby,.carbon-text{text-decoration:none!important}#carbonads{position:static;display:block;max-width:420px;padding:15px 15px 15px 160px;margin:2rem -15px -2rem;overflow:hidden;font-size:13px;line-height:1.4;text-align:left;background-color:transparent;border:solid rgba(255,255,255,.15);border-width:1px 0 0}.carbon-text{color:#fff!important}@media (min-width:420px){#carbonads{max-width:330px;margin-right:auto;margin-bottom:0;margin-left:auto;border-width:1px;border-radius:4px}}.carbon-img{float:left;margin-left:-145px}.carbon-poweredby{display:block;color:rgba(255,255,255,.5)!important}@media (min-width:992px){.bs-docs-header #carbonads{position: absolute;top:0;right:0;margin-top:0;}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px;border:none}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.v4-tease{display:block;padding:15px 20px;font-weight:700;color:#fff;text-align:center;background-color:#0275d8}.v4-tease:hover{color:#fff;text-decoration:none;background-color:#0269c2}@media print{a[href]:after{content:""!important}}
/*# sourceMappingURL=docs.min.css.map */
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Wall of browser bugs · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Wall of browser bugs</h1> <p>A list of the browser bugs that Bootstrap is currently grappling with.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-12 role=main> <div class=bs-docs-section> <h1 class=page-header id=browser-bugs>Browser bugs</h1> <p class=lead>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p> <p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href=../getting-started/#support>see our browser compatibility docs</a>.</p> <p>See also:</p> <ul> <li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li> <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li> <li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [meta] Issues affecting Bootstrap</a></li> <li><a href=https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o>jQuery's browser bug workarounds</a></li> </ul> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of bug</th> <th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Native browser tooltip for <code class=highlighter-rouge>title</code> shows on first keyboard focus (in addition to custom tooltip component)</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560>Edge issue #6793560</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18692>#18692</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovered element still remains in <code class=highlighter-rouge>:hover</code> state after scrolling away.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673>Edge issue #5381673</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14211>#14211</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>When hovering over a <code class=highlighter-rouge><select></code> menu item, the cursor for the element underneath the menu is displayed.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/817822>Edge issue #817822</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14528>#14528</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>CSS <code class=highlighter-rouge>border-radius</code> sometimes causes lines of bleed-through of the <code class=highlighter-rouge>background-color</code> of the parent element.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037>Edge issue #3342037</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16671>#16671</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>background</code> of <code class=highlighter-rouge><tr></code> is only applied to first child cell instead of all cells in the row</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620>Edge issue #5865620</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18504>#18504</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>@-ms-viewport{width: device-width;}</code> has side-effect of making scrollbars auto-hide</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383>Edge issue #7165383</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18543>#18543</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Background color from lower layer bleeds through transparent border in some cases</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505>Edge issue #6274505</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18228>#18228</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovering over descendant SVG element fires <code class=highlighter-rouge>mouseleave</code> event at ancestor</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318>Edge issue #7787318</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>.table-bordered</code> with an empty <code class=highlighter-rouge><tbody></code> is missing borders.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/13453>#13453</a> </td> </tr> <tr> <td>Firefox </td> <td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/793>#793</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>focus</code> events should not be fired at the <code class=highlighter-rouge>document</code> object</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18365>#18365</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Wide floated table doesn’t wrap onto new line</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19839>#19839</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Mouse sometimes not within element for purposes of <code class=highlighter-rouge>mouseenter</code>/<code class=highlighter-rouge>mouseleave</code> when it’s within SVG elements</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>position: absolute</code> element that’s wider than its column renders differently than other browsers</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1282363">Mozilla bug #1282363</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20161>#20161</a> </td> </tr> <tr> <td>Firefox (Windows) </td> <td><p>Right border of <code class=highlighter-rouge><select></code> menu is sometimes missing when screen is set to uncommon resolution</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15990>#15990</a> </td> </tr> <tr> <td>Firefox (OS X & Linux) </td> <td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19626>#19626</a> </td> </tr> <tr> <td>Chrome (Android) </td> <td><p>Tapping on an <code class=highlighter-rouge><input></code> in a scrollable overlay doesn’t scroll the <code class=highlighter-rouge><input></code> into view</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=595210">Chromium issue #595210</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17338>#17338</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Clicking above <code class=highlighter-rouge><input type="number"></code> increment button flashes the decrement button.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a> </td> <td>Offshoot of <a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Chrome </td> <td><p>CSS infinite linear animation with alpha transparency leaks memory.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=429375">Chromium issue #429375</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14409>#14409</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>:focus</code> <code class=highlighter-rouge>outline</code> style causes cursor to not be displayed when toggling a <code class=highlighter-rouge>readonly</code> <code class=highlighter-rouge><input></code> to read-write.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=465274">Chromium issue #465274</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16022>#16022</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>table-cell</code> borders not overlapping despite <code class=highlighter-rouge>margin-right: -1px</code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=534750">Chromium issue #534750</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17438>#17438</a>, <a href=https://github.com/twbs/bootstrap/issues/14237>#14237</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Clicking scrollbar in <code class=highlighter-rouge><select multiple></code> with overflowed options will select nearby <code class=highlighter-rouge><option></code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=597642">Chromium issue #597642</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19810>#19810</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Chrome (Windows & Linux) </td> <td><p>Animation glitch when returning to inactive tab after animations occurred while tab was hidden.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=449180">Chromium issue #449180</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15298>#15298</a> </td> </tr> <tr> <td>Safari </td> <td><p><code class=highlighter-rouge>rem</code> units in media queries should be calculated using <code class=highlighter-rouge>font-size: initial</code>, not the root element’s <code class=highlighter-rouge>font-size</code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p><code class=highlighter-rouge>px</code>, <code class=highlighter-rouge>em</code>, and <code class=highlighter-rouge>rem</code> should all behave the same in media queries when page zoom is applied</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Weird button behavior with some <code class=highlighter-rouge><input type="number"></code> elements.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>, <a href=https://openradar.appspot.com/18834768>Apple Safari Radar #18834768</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a>, <a href=https://github.com/necolas/normalize.css/issues/283>Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Small font size when printing webpage with fixed-width <code class=highlighter-rouge>.container</code>.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>, <a href=https://openradar.appspot.com/19435018>Apple Safari Radar #19435018</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14868>#14868</a> </td> </tr> <tr> <td>Safari (iPad) </td> <td><p><code class=highlighter-rouge><select></code> menu on iPad causes shifting of hit-testing areas</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150079">WebKit bug #150079</a>, <a href=https://openradar.appspot.com/23082521>Apple Safari Radar #23082521</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14975>#14975</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>transform: translate3d(0,0,0);</code> rendering bug.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href=https://openradar.appspot.com/18804973>Apple Safari Radar #18804973</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14603>#14603</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Text input’s cursor doesn’t move while scrolling the page.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href=https://openradar.appspot.com/18819624>Apple Safari Radar #18819624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14708>#14708</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Can’t move cursor to start of text after entering long string of text into <code class=highlighter-rouge><input type="text"></code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>, <a href=https://openradar.appspot.com/22299624>Apple Safari Radar #22299624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16988>#16988</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>display: block</code> causes text of temporal <code class=highlighter-rouge><input></code>s to become vertically misaligned</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>, <a href=https://openradar.appspot.com/19434878>Apple Safari Radar #19434878</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/11266>#11266</a>, <a href=https://github.com/twbs/bootstrap/issues/13098>#13098</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping on <code class=highlighter-rouge><body></code> doesn’t fire <code class=highlighter-rouge>click</code> events</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16028>#16028</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18859>#18859</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping into an <code class=highlighter-rouge><input></code> within a <code class=highlighter-rouge>position:fixed</code> element scrolls to the top of the page</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>, <a href=https://openradar.appspot.com/24235301>Apple Safari Radar #24235301</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17497>#17497</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge><body></code> with <code class=highlighter-rouge>overflow:hidden</code> CSS is scrollable on iOS</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Scroll gesture in text field in <code class=highlighter-rouge>position:fixed</code> element sometimes scrolls <code class=highlighter-rouge><body></code> instead of scrollable ancestor</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping from one <code class=highlighter-rouge><input></code> to another in an overlay can cause shaking/jiggling effect</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158276">WebKit bug #158276</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19927>#19927</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Modal with <code class=highlighter-rouge>-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17695>#17695</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Safari (iPad Pro) </td> <td><p>Rendering of descendants of <code class=highlighter-rouge>position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>, <a href=https://openradar.appspot.com/24030853>Apple Safari Radar #24030853</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18738>#18738</a> </td> </tr> </tbody> </table> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=most-wanted>Most wanted features</h1> <p class=lead>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.</p> <p>We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.</p> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of feature</th> <th>Upstream issue(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532>Edge UserVoice idea #12299532</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621>Edge UserVoice idea #6263621</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Fire a <a href=https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel><code class=highlighter-rouge>transitioncancel</code> event</a> when a CSS transition is canceled</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264125">Mozilla bug #1264125</a> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1182856">Mozilla bug #1182856</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=231752">Chromium issue #231752</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Wall of browser bugs · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Wall of browser bugs</h1> <p>A list of the browser bugs that Bootstrap is currently grappling with.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-12 role=main> <div class=bs-docs-section> <h1 class=page-header id=browser-bugs>Browser bugs</h1> <p class=lead>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p> <p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href=../getting-started/#support>see our browser compatibility docs</a>.</p> <p>See also:</p> <ul> <li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li> <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li> <li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [meta] Issues affecting Bootstrap</a></li> <li><a href=https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o>jQuery's browser bug workarounds</a></li> </ul> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of bug</th> <th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Native browser tooltip for <code class=highlighter-rouge>title</code> shows on first keyboard focus (in addition to custom tooltip component)</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560>Edge issue #6793560</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18692>#18692</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovered element still remains in <code class=highlighter-rouge>:hover</code> state after scrolling away.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673>Edge issue #5381673</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14211>#14211</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>When hovering over a <code class=highlighter-rouge><select></code> menu item, the cursor for the element underneath the menu is displayed.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/817822>Edge issue #817822</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14528>#14528</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>CSS <code class=highlighter-rouge>border-radius</code> sometimes causes lines of bleed-through of the <code class=highlighter-rouge>background-color</code> of the parent element.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037>Edge issue #3342037</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16671>#16671</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>background</code> of <code class=highlighter-rouge><tr></code> is only applied to first child cell instead of all cells in the row</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620>Edge issue #5865620</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18504>#18504</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>@-ms-viewport{width: device-width;}</code> has side-effect of making scrollbars auto-hide</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383>Edge issue #7165383</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18543>#18543</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Background color from lower layer bleeds through transparent border in some cases</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505>Edge issue #6274505</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18228>#18228</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovering over descendant SVG element fires <code class=highlighter-rouge>mouseleave</code> event at ancestor</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318>Edge issue #7787318</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>.table-bordered</code> with an empty <code class=highlighter-rouge><tbody></code> is missing borders.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/13453>#13453</a> </td> </tr> <tr> <td>Firefox </td> <td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/793>#793</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>focus</code> events should not be fired at the <code class=highlighter-rouge>document</code> object</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18365>#18365</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Wide floated table doesn’t wrap onto new line</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19839>#19839</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Mouse sometimes not within element for purposes of <code class=highlighter-rouge>mouseenter</code>/<code class=highlighter-rouge>mouseleave</code> when it’s within SVG elements</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>position: absolute</code> element that’s wider than its column renders differently than other browsers</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1282363">Mozilla bug #1282363</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20161>#20161</a> </td> </tr> <tr> <td>Firefox (Windows) </td> <td><p>Right border of <code class=highlighter-rouge><select></code> menu is sometimes missing when screen is set to uncommon resolution</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15990>#15990</a> </td> </tr> <tr> <td>Firefox (OS X & Linux) </td> <td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19626>#19626</a> </td> </tr> <tr> <td>Chrome (Android) </td> <td><p>Tapping on an <code class=highlighter-rouge><input></code> in a scrollable overlay doesn’t scroll the <code class=highlighter-rouge><input></code> into view</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=595210">Chromium issue #595210</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17338>#17338</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Clicking above <code class=highlighter-rouge><input type="number"></code> increment button flashes the decrement button.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a> </td> <td>Offshoot of <a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Chrome </td> <td><p>CSS infinite linear animation with alpha transparency leaks memory.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=429375">Chromium issue #429375</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14409>#14409</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>:focus</code> <code class=highlighter-rouge>outline</code> style causes cursor to not be displayed when toggling a <code class=highlighter-rouge>readonly</code> <code class=highlighter-rouge><input></code> to read-write.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=465274">Chromium issue #465274</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16022>#16022</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>table-cell</code> borders not overlapping despite <code class=highlighter-rouge>margin-right: -1px</code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=534750">Chromium issue #534750</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17438>#17438</a>, <a href=https://github.com/twbs/bootstrap/issues/14237>#14237</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Clicking scrollbar in <code class=highlighter-rouge><select multiple></code> with overflowed options will select nearby <code class=highlighter-rouge><option></code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=597642">Chromium issue #597642</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19810>#19810</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Chrome (Windows & Linux) </td> <td><p>Animation glitch when returning to inactive tab after animations occurred while tab was hidden.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=449180">Chromium issue #449180</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15298>#15298</a> </td> </tr> <tr> <td>Safari </td> <td><p><code class=highlighter-rouge>rem</code> units in media queries should be calculated using <code class=highlighter-rouge>font-size: initial</code>, not the root element’s <code class=highlighter-rouge>font-size</code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p><code class=highlighter-rouge>px</code>, <code class=highlighter-rouge>em</code>, and <code class=highlighter-rouge>rem</code> should all behave the same in media queries when page zoom is applied</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Weird button behavior with some <code class=highlighter-rouge><input type="number"></code> elements.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>, <a href=https://openradar.appspot.com/18834768>Apple Safari Radar #18834768</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a>, <a href=https://github.com/necolas/normalize.css/issues/283>Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Small font size when printing webpage with fixed-width <code class=highlighter-rouge>.container</code>.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>, <a href=https://openradar.appspot.com/19435018>Apple Safari Radar #19435018</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14868>#14868</a> </td> </tr> <tr> <td>Safari (iPad) </td> <td><p><code class=highlighter-rouge><select></code> menu on iPad causes shifting of hit-testing areas</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150079">WebKit bug #150079</a>, <a href=https://openradar.appspot.com/23082521>Apple Safari Radar #23082521</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14975>#14975</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>transform: translate3d(0,0,0);</code> rendering bug.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href=https://openradar.appspot.com/18804973>Apple Safari Radar #18804973</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14603>#14603</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Text input’s cursor doesn’t move while scrolling the page.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href=https://openradar.appspot.com/18819624>Apple Safari Radar #18819624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14708>#14708</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Can’t move cursor to start of text after entering long string of text into <code class=highlighter-rouge><input type="text"></code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>, <a href=https://openradar.appspot.com/22299624>Apple Safari Radar #22299624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16988>#16988</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>display: block</code> causes text of temporal <code class=highlighter-rouge><input></code>s to become vertically misaligned</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>, <a href=https://openradar.appspot.com/19434878>Apple Safari Radar #19434878</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/11266>#11266</a>, <a href=https://github.com/twbs/bootstrap/issues/13098>#13098</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping on <code class=highlighter-rouge><body></code> doesn’t fire <code class=highlighter-rouge>click</code> events</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16028>#16028</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18859>#18859</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping into an <code class=highlighter-rouge><input></code> within a <code class=highlighter-rouge>position:fixed</code> element scrolls to the top of the page</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>, <a href=https://openradar.appspot.com/24235301>Apple Safari Radar #24235301</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17497>#17497</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge><body></code> with <code class=highlighter-rouge>overflow:hidden</code> CSS is scrollable on iOS</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Scroll gesture in text field in <code class=highlighter-rouge>position:fixed</code> element sometimes scrolls <code class=highlighter-rouge><body></code> instead of scrollable ancestor</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping from one <code class=highlighter-rouge><input></code> to another in an overlay can cause shaking/jiggling effect</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158276">WebKit bug #158276</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19927>#19927</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Modal with <code class=highlighter-rouge>-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17695>#17695</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Safari (iPad Pro) </td> <td><p>Rendering of descendants of <code class=highlighter-rouge>position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>, <a href=https://openradar.appspot.com/24030853>Apple Safari Radar #24030853</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18738>#18738</a> </td> </tr> </tbody> </table> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=most-wanted>Most wanted features</h1> <p class=lead>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.</p> <p>We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.</p> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of feature</th> <th>Upstream issue(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532>Edge UserVoice idea #12299532</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621>Edge UserVoice idea #6263621</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Fire a <a href=https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel><code class=highlighter-rouge>transitioncancel</code> event</a> when a CSS transition is canceled</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264125">Mozilla bug #1264125</a> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1182856">Mozilla bug #1182856</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=231752">Chromium issue #231752</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Components · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li class=active> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=glyphicons>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 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 include a link back to <a href=http://glyphicons.com/ >Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <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> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <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 data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><button</span> <span class=na>type=</span><span class=s>"button"</span> <span class=na>class=</span><span class=s>"btn btn-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Components · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li class=active> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=glyphicons>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 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 include a link back to <a href=http://glyphicons.com/ >Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <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> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <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 data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><button</span> <span class=na>type=</span><span class=s>"button"</span> <span class=na>class=</span><span class=s>"btn btn-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
<span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-align-left"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span>
<span class=nt></button></span>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> CSS · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li class=active> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=overview>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> CSS · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li class=active> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=overview>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
<span class=nt><html</span> <span class=na>lang=</span><span class=s>"en"</span><span class=nt>></span>
...
<span class=nt></html></span></code></pre></figure> <h2 id=overview-mobile>Mobile first</h2> <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p> <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1"</span><span class=nt>></span></code></pre></figure> <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class=nt>></span></code></pre></figure> <h2 id=overview-type-links>Typography and links</h2> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <ul> <li>Set <code>background-color: #fff;</code> on the <code>body</code></li> <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li> <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </ul> <p>These styles can be found within <code>scaffolding.less</code>.</p> <h2 id=overview-normalize>Normalize.css</h2> <p>For improved cross-browser rendering, we use <a href=http://necolas.github.io/normalize.css/ target=_blank>Normalize.css</a>, a project by <a href=https://twitter.com/necolas target=_blank>Nicolas Gallagher</a> and <a href=https://twitter.com/jon_neal target=_blank>Jonathan Neal</a>.</p> <h2 id=overview-container>Containers</h2> <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p> <p>Use <code>.container</code> for a responsive fixed width container.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"container"</span><span class=nt>></span>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Customize and download · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li class=active> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Customize and download</h1> <p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <!--[if lt IE 9]> <style>.bs-customizer,.bs-customizer-import,.bs-docs-sidebar{display:none}</style> <div class="alert alert-danger"> <strong>The Bootstrap Customizer does not support IE9 and below.</strong><br> Please take a second to <a href=http://browsehappy.com/ >upgrade to a more modern browser</a>. </div> <![endif]--> <div class="alert alert-warning alert-dismissible" role=alert id=defaults-change-alert> <button type=button class=close data-dismiss=alert aria-label=Close><span aria-hidden=true>×</span></button> <strong>Heads up!</strong> The default value for <code>@brand-primary</code> has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading. </div> <div class="bs-docs-section bs-customizer-import"> <div class=bs-dropzone id=import-drop-target> <div class=import-header> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> </div> <p class=lead>Have an existing configuration? Upload your <code>config.json</code> to import it.</p> <p>Drag and drop here, or <label id=import-manual-trigger class=btn-link>manually upload<input type=file id=import-file-select class=hidden></label>.</p> <hr> <p><strong>Don't have one?</strong> That's okay—just start customizing the fields below.</p> </div> </div> <form class=bs-customizer> <div class=bs-docs-section id=less-section> <button class="btn btn-default toggle" type=button>Toggle all</button> <h1 class=page-header id=less>Less files</h1> <p class=lead>Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href=../css/ >CSS</a> and <a href=../components/ >Components</a> pages in the docs.</p> <div class=row> <div class="col-xs-6 col-sm-4"> <h3>Common CSS</h3> <div class=checkbox> <label> <input type=checkbox checked value=print.less> Print media styles </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=type.less> Typography </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=code.less> Code </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=grid.less> Grid system </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tables.less> Tables </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=forms.less data-dependents=navbar.less,input-groups.less> Forms </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=buttons.less data-dependents=button-groups.less> Buttons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=responsive-utilities.less> Responsive utilities </label> </div> </div> <div class="col-xs-6 col-sm-4"> <h3>Components</h3> <div class=checkbox> <label> <input type=checkbox checked value=glyphicons.less> Glyphicons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=button-groups.less data-dependencies=buttons.less> Button groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=input-groups.less data-dependencies=forms.less> Input groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=navs.less data-dependents=navbar.less> Navs </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=navbar.less data-dependencies=forms.less,navs.less> Navbar </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=breadcrumbs.less> Breadcrumbs </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=pagination.less> Pagination </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=pager.less> Pager </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=labels.less> Labels </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=badges.less> Badges </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=jumbotron.less> Jumbotron </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=thumbnails.less> Thumbnails </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=alerts.less> Alerts </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=progress-bars.less> Progress bars </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=media.less> Media items </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=list-group.less> List groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=panels.less> Panels </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=responsive-embed.less> Responsive embed </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=wells.less> Wells </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=close.less> Close icon </label> </div> </div> <div class="col-xs-6 col-sm-4"> <h3>JavaScript components</h3> <div class=checkbox> <label> <input type=checkbox checked value=component-animations.less> Component animations (for JS)<br> (includes Collapse) </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=dropdowns.less> Dropdown </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tooltip.less> Tooltip </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=popovers.less> Popover </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=modals.less> Modal </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=carousel.less> Carousel </label> </div> </div> </div> </div> <div class=bs-docs-section id=plugin-section> <button class="btn btn-default toggle" type=button>Toggle all</button> <h1 class=page-header id=plugins>jQuery plugins</h1> <p class=lead>Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href=../javascript/ >JavaScript</a> page in the docs.</p> <div class=row> <div class=col-lg-6> <h4>Linked to components</h4> <div class=checkbox> <label> <input type=checkbox checked value=alert.js> Alert dismissal </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=button.js> Advanced buttons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=carousel.js> Carousel functionality </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=dropdown.js> Dropdowns </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=modal.js> Modals </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tooltip.js> Tooltips </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=popover.js data-dependencies=tooltip.js> Popovers <small>(requires Tooltips)</small> </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tab.js> Togglable tabs </label> </div> </div> <div class=col-lg-6> <h4>Magic</h4> <div class=checkbox> <label> <input type=checkbox checked value=affix.js> Affix </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=collapse.js> Collapse </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=scrollspy.js> Scrollspy </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=transition.js> Transitions <small>(required for any kind of animation)</small> </label> </div> </div> </div> <div class="bs-callout bs-callout-info"> <h4>Produces two files</h4> <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p> </div> <div class="bs-callout bs-callout-danger"> <h4>jQuery required</h4> <p>All plugins require the latest version of <a href=http://jquery.com/ target=_blank>jQuery</a> to be included.</p> </div> </div> <div class=bs-docs-section id=less-variables-section> <button class="btn btn-default toggle" type=button>Reset to defaults</button> <h1 class=page-header id=less-variables>Less variables</h1> <p class=lead>Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p> <h2 id=colors>Colors</h2> <p>Gray and brand colors for use across Bootstrap.</p> <div class=row> <div class=col-xs-4> <label for=input-@gray-base>@gray-base</label> <input class=form-control id=input-@gray-base value=#000 data-var=@gray-base> </div> <div class=col-xs-4> <label for=input-@gray-darker>@gray-darker</label> <input class=form-control id=input-@gray-darker value="lighten(@gray-base, 13.5%)" data-var=@gray-darker> </div> <div class=col-xs-4> <label for=input-@gray-dark>@gray-dark</label> <input class=form-control id=input-@gray-dark value="lighten(@gray-base, 20%)" data-var=@gray-dark> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@gray>@gray</label> <input class=form-control id=input-@gray value="lighten(@gray-base, 33.5%)" data-var=@gray> </div> <div class=col-xs-4> <label for=input-@gray-light>@gray-light</label> <input class=form-control id=input-@gray-light value="lighten(@gray-base, 46.7%)" data-var=@gray-light> </div> <div class=col-xs-4> <label for=input-@gray-lighter>@gray-lighter</label> <input class=form-control id=input-@gray-lighter value="lighten(@gray-base, 93.5%)" data-var=@gray-lighter> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@brand-primary>@brand-primary</label> <input class=form-control id=input-@brand-primary value="darken(#428bca, 6.5%)" data-var=@brand-primary> </div> <div class=col-xs-4> <label for=input-@brand-success>@brand-success</label> <input class=form-control id=input-@brand-success value=#5cb85c data-var=@brand-success> </div> <div class=col-xs-4> <label for=input-@brand-info>@brand-info</label> <input class=form-control id=input-@brand-info value=#5bc0de data-var=@brand-info> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@brand-warning>@brand-warning</label> <input class=form-control id=input-@brand-warning value=#f0ad4e data-var=@brand-warning> </div> <div class=col-xs-4> <label for=input-@brand-danger>@brand-danger</label> <input class=form-control id=input-@brand-danger value=#d9534f data-var=@brand-danger> </div> </div> <h2 id=scaffolding>Scaffolding</h2> <p>Settings for some of the most global styles.</p> <div class=row> <div class=col-xs-4> <label for=input-@body-bg>@body-bg</label> <input class=form-control id=input-@body-bg aria-describedby=help-block-@body-bg value=#fff data-var=@body-bg> <p class=help-block id=help-block-@body-bg>Background color for <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@text-color>@text-color</label> <input class=form-control id=input-@text-color aria-describedby=help-block-@text-color value=@gray-dark data-var=@text-color> <p class=help-block id=help-block-@text-color>Global text color on <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@link-color>@link-color</label> <input class=form-control id=input-@link-color aria-describedby=help-block-@link-color value=@brand-primary data-var=@link-color> <p class=help-block id=help-block-@link-color>Global textual link color.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@link-hover-color>@link-hover-color</label> <input class=form-control id=input-@link-hover-color aria-describedby=help-block-@link-hover-color value="darken(@link-color, 15%)" data-var=@link-hover-color> <p class=help-block id=help-block-@link-hover-color>Link hover color set via <code>darken()</code> function.</p> </div> <div class=col-xs-4> <label for=input-@link-hover-decoration>@link-hover-decoration</label> <input class=form-control id=input-@link-hover-decoration aria-describedby=help-block-@link-hover-decoration value=underline data-var=@link-hover-decoration> <p class=help-block id=help-block-@link-hover-decoration>Link hover decoration.</p> </div> </div> <h2 id=typography>Typography</h2> <p>Font, line-height, and color for body text, headings, and more.</p> <div class=row> <div class=col-xs-4> <label for=input-@font-family-sans-serif>@font-family-sans-serif</label> <input class=form-control id=input-@font-family-sans-serif value=""Helvetica Neue", Helvetica, Arial, sans-serif" data-var=@font-family-sans-serif> </div> <div class=col-xs-4> <label for=input-@font-family-serif>@font-family-serif</label> <input class=form-control id=input-@font-family-serif value="Georgia, "Times New Roman", Times, serif" data-var=@font-family-serif> </div> <div class=col-xs-4> <label for=input-@font-family-monospace>@font-family-monospace</label> <input class=form-control id=input-@font-family-monospace aria-describedby=help-block-@font-family-monospace value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var=@font-family-monospace> <p class=help-block id=help-block-@font-family-monospace>Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-family-base>@font-family-base</label> <input class=form-control id=input-@font-family-base value=@font-family-sans-serif data-var=@font-family-base> </div> <div class=col-xs-4> <label for=input-@font-size-base>@font-size-base</label> <input class=form-control id=input-@font-size-base value=14px data-var=@font-size-base> </div> <div class=col-xs-4> <label for=input-@font-size-large>@font-size-large</label> <input class=form-control id=input-@font-size-large value="ceil((@font-size-base * 1.25))" data-var=@font-size-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-small>@font-size-small</label> <input class=form-control id=input-@font-size-small value="ceil((@font-size-base * 0.85))" data-var=@font-size-small> </div> <div class=col-xs-4> <label for=input-@font-size-h1>@font-size-h1</label> <input class=form-control id=input-@font-size-h1 value="floor((@font-size-base * 2.6))" data-var=@font-size-h1> </div> <div class=col-xs-4> <label for=input-@font-size-h2>@font-size-h2</label> <input class=form-control id=input-@font-size-h2 value="floor((@font-size-base * 2.15))" data-var=@font-size-h2> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-h3>@font-size-h3</label> <input class=form-control id=input-@font-size-h3 value="ceil((@font-size-base * 1.7))" data-var=@font-size-h3> </div> <div class=col-xs-4> <label for=input-@font-size-h4>@font-size-h4</label> <input class=form-control id=input-@font-size-h4 value="ceil((@font-size-base * 1.25))" data-var=@font-size-h4> </div> <div class=col-xs-4> <label for=input-@font-size-h5>@font-size-h5</label> <input class=form-control id=input-@font-size-h5 value=@font-size-base data-var=@font-size-h5> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-h6>@font-size-h6</label> <input class=form-control id=input-@font-size-h6 value="ceil((@font-size-base * 0.85))" data-var=@font-size-h6> </div> <div class=col-xs-4> <label for=input-@line-height-base>@line-height-base</label> <input class=form-control id=input-@line-height-base aria-describedby=help-block-@line-height-base value=1.428571429 data-var=@line-height-base> <p class=help-block id=help-block-@line-height-base>Unit-less <code>line-height</code> for use in components like buttons.</p> </div> <div class=col-xs-4> <label for=input-@line-height-computed>@line-height-computed</label> <input class=form-control id=input-@line-height-computed aria-describedby=help-block-@line-height-computed value="floor((@font-size-base * @line-height-base))" data-var=@line-height-computed> <p class=help-block id=help-block-@line-height-computed>Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-font-family>@headings-font-family</label> <input class=form-control id=input-@headings-font-family aria-describedby=help-block-@headings-font-family value=inherit data-var=@headings-font-family> <p class=help-block id=help-block-@headings-font-family>By default, this inherits from the <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@headings-font-weight>@headings-font-weight</label> <input class=form-control id=input-@headings-font-weight value=500 data-var=@headings-font-weight> </div> <div class=col-xs-4> <label for=input-@headings-line-height>@headings-line-height</label> <input class=form-control id=input-@headings-line-height value=1.1 data-var=@headings-line-height> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-color>@headings-color</label> <input class=form-control id=input-@headings-color value=inherit data-var=@headings-color> </div> </div> <h2 id=iconography>Iconography</h2> <p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p> <div class=row> <div class=col-xs-4> <label for=input-@icon-font-path>@icon-font-path</label> <input class=form-control id=input-@icon-font-path aria-describedby=help-block-@icon-font-path value="../fonts/" data-var=@icon-font-path> <p class=help-block id=help-block-@icon-font-path>Load fonts from this directory.</p> </div> <div class=col-xs-4> <label for=input-@icon-font-name>@icon-font-name</label> <input class=form-control id=input-@icon-font-name aria-describedby=help-block-@icon-font-name value="glyphicons-halflings-regular" data-var=@icon-font-name> <p class=help-block id=help-block-@icon-font-name>File name for all font files.</p> </div> <div class=col-xs-4> <label for=input-@icon-font-svg-id>@icon-font-svg-id</label> <input class=form-control id=input-@icon-font-svg-id aria-describedby=help-block-@icon-font-svg-id value="glyphicons_halflingsregular" data-var=@icon-font-svg-id> <p class=help-block id=help-block-@icon-font-svg-id>Element ID within SVG icon file.</p> </div> </div> <h2 id=components>Components</h2> <p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p> <div class=row> <div class=col-xs-4> <label for=input-@padding-base-vertical>@padding-base-vertical</label> <input class=form-control id=input-@padding-base-vertical value=6px data-var=@padding-base-vertical> </div> <div class=col-xs-4> <label for=input-@padding-base-horizontal>@padding-base-horizontal</label> <input class=form-control id=input-@padding-base-horizontal value=12px data-var=@padding-base-horizontal> </div> <div class=col-xs-4> <label for=input-@padding-large-vertical>@padding-large-vertical</label> <input class=form-control id=input-@padding-large-vertical value=10px data-var=@padding-large-vertical> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@padding-large-horizontal>@padding-large-horizontal</label> <input class=form-control id=input-@padding-large-horizontal value=16px data-var=@padding-large-horizontal> </div> <div class=col-xs-4> <label for=input-@padding-small-vertical>@padding-small-vertical</label> <input class=form-control id=input-@padding-small-vertical value=5px data-var=@padding-small-vertical> </div> <div class=col-xs-4> <label for=input-@padding-small-horizontal>@padding-small-horizontal</label> <input class=form-control id=input-@padding-small-horizontal value=10px data-var=@padding-small-horizontal> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@padding-xs-vertical>@padding-xs-vertical</label> <input class=form-control id=input-@padding-xs-vertical value=1px data-var=@padding-xs-vertical> </div> <div class=col-xs-4> <label for=input-@padding-xs-horizontal>@padding-xs-horizontal</label> <input class=form-control id=input-@padding-xs-horizontal value=5px data-var=@padding-xs-horizontal> </div> <div class=col-xs-4> <label for=input-@line-height-large>@line-height-large</label> <input class=form-control id=input-@line-height-large value=1.3333333 data-var=@line-height-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@line-height-small>@line-height-small</label> <input class=form-control id=input-@line-height-small value=1.5 data-var=@line-height-small> </div> <div class=col-xs-4> <label for=input-@border-radius-base>@border-radius-base</label> <input class=form-control id=input-@border-radius-base value=4px data-var=@border-radius-base> </div> <div class=col-xs-4> <label for=input-@border-radius-large>@border-radius-large</label> <input class=form-control id=input-@border-radius-large value=6px data-var=@border-radius-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@border-radius-small>@border-radius-small</label> <input class=form-control id=input-@border-radius-small value=3px data-var=@border-radius-small> </div> <div class=col-xs-4> <label for=input-@component-active-color>@component-active-color</label> <input class=form-control id=input-@component-active-color aria-describedby=help-block-@component-active-color value=#fff data-var=@component-active-color> <p class=help-block id=help-block-@component-active-color>Global color for active items (e.g., navs or dropdowns).</p> </div> <div class=col-xs-4> <label for=input-@component-active-bg>@component-active-bg</label> <input class=form-control id=input-@component-active-bg aria-describedby=help-block-@component-active-bg value=@brand-primary data-var=@component-active-bg> <p class=help-block id=help-block-@component-active-bg>Global background color for active items (e.g., navs or dropdowns).</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@caret-width-base>@caret-width-base</label> <input class=form-control id=input-@caret-width-base aria-describedby=help-block-@caret-width-base value=4px data-var=@caret-width-base> <p class=help-block id=help-block-@caret-width-base>Width of the <code>border</code> for generating carets that indicate dropdowns.</p> </div> <div class=col-xs-4> <label for=input-@caret-width-large>@caret-width-large</label> <input class=form-control id=input-@caret-width-large aria-describedby=help-block-@caret-width-large value=5px data-var=@caret-width-large> <p class=help-block id=help-block-@caret-width-large>Carets increase slightly in size for larger components.</p> </div> </div> <h2 id=tables>Tables</h2> <p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p> <div class=row> <div class=col-xs-4> <label for=input-@table-cell-padding>@table-cell-padding</label> <input class=form-control id=input-@table-cell-padding aria-describedby=help-block-@table-cell-padding value=8px data-var=@table-cell-padding> <p class=help-block id=help-block-@table-cell-padding>Padding for <code><th></code>s and <code><td></code>s.</p> </div> <div class=col-xs-4> <label for=input-@table-condensed-cell-padding>@table-condensed-cell-padding</label> <input class=form-control id=input-@table-condensed-cell-padding aria-describedby=help-block-@table-condensed-cell-padding value=5px data-var=@table-condensed-cell-padding> <p class=help-block id=help-block-@table-condensed-cell-padding>Padding for cells in <code>.table-condensed</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg>@table-bg</label> <input class=form-control id=input-@table-bg aria-describedby=help-block-@table-bg value=transparent data-var=@table-bg> <p class=help-block id=help-block-@table-bg>Default background color used for all tables.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@table-bg-accent>@table-bg-accent</label> <input class=form-control id=input-@table-bg-accent aria-describedby=help-block-@table-bg-accent value=#f9f9f9 data-var=@table-bg-accent> <p class=help-block id=help-block-@table-bg-accent>Background color used for <code>.table-striped</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg-hover>@table-bg-hover</label> <input class=form-control id=input-@table-bg-hover aria-describedby=help-block-@table-bg-hover value=#f5f5f5 data-var=@table-bg-hover> <p class=help-block id=help-block-@table-bg-hover>Background color used for <code>.table-hover</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg-active>@table-bg-active</label> <input class=form-control id=input-@table-bg-active value=@table-bg-hover data-var=@table-bg-active> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@table-border-color>@table-border-color</label> <input class=form-control id=input-@table-border-color aria-describedby=help-block-@table-border-color value=#ddd data-var=@table-border-color> <p class=help-block id=help-block-@table-border-color>Border color for table and cell borders.</p> </div> </div> <h2 id=buttons>Buttons</h2> <p>For each of Bootstrap's buttons, define text, background and border color.</p> <div class=row> <div class=col-xs-4> <label for=input-@btn-font-weight>@btn-font-weight</label> <input class=form-control id=input-@btn-font-weight value=normal data-var=@btn-font-weight> </div> <div class=col-xs-4> <label for=input-@btn-default-color>@btn-default-color</label> <input class=form-control id=input-@btn-default-color value=#333 data-var=@btn-default-color> </div> <div class=col-xs-4> <label for=input-@btn-default-bg>@btn-default-bg</label> <input class=form-control id=input-@btn-default-bg value=#fff data-var=@btn-default-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-default-border>@btn-default-border</label> <input class=form-control id=input-@btn-default-border value=#ccc data-var=@btn-default-border> </div> <div class=col-xs-4> <label for=input-@btn-primary-color>@btn-primary-color</label> <input class=form-control id=input-@btn-primary-color value=#fff data-var=@btn-primary-color> </div> <div class=col-xs-4> <label for=input-@btn-primary-bg>@btn-primary-bg</label> <input class=form-control id=input-@btn-primary-bg value=@brand-primary data-var=@btn-primary-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-primary-border>@btn-primary-border</label> <input class=form-control id=input-@btn-primary-border value="darken(@btn-primary-bg, 5%)" data-var=@btn-primary-border> </div> <div class=col-xs-4> <label for=input-@btn-success-color>@btn-success-color</label> <input class=form-control id=input-@btn-success-color value=#fff data-var=@btn-success-color> </div> <div class=col-xs-4> <label for=input-@btn-success-bg>@btn-success-bg</label> <input class=form-control id=input-@btn-success-bg value=@brand-success data-var=@btn-success-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-success-border>@btn-success-border</label> <input class=form-control id=input-@btn-success-border value="darken(@btn-success-bg, 5%)" data-var=@btn-success-border> </div> <div class=col-xs-4> <label for=input-@btn-info-color>@btn-info-color</label> <input class=form-control id=input-@btn-info-color value=#fff data-var=@btn-info-color> </div> <div class=col-xs-4> <label for=input-@btn-info-bg>@btn-info-bg</label> <input class=form-control id=input-@btn-info-bg value=@brand-info data-var=@btn-info-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-info-border>@btn-info-border</label> <input class=form-control id=input-@btn-info-border value="darken(@btn-info-bg, 5%)" data-var=@btn-info-border> </div> <div class=col-xs-4> <label for=input-@btn-warning-color>@btn-warning-color</label> <input class=form-control id=input-@btn-warning-color value=#fff data-var=@btn-warning-color> </div> <div class=col-xs-4> <label for=input-@btn-warning-bg>@btn-warning-bg</label> <input class=form-control id=input-@btn-warning-bg value=@brand-warning data-var=@btn-warning-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-warning-border>@btn-warning-border</label> <input class=form-control id=input-@btn-warning-border value="darken(@btn-warning-bg, 5%)" data-var=@btn-warning-border> </div> <div class=col-xs-4> <label for=input-@btn-danger-color>@btn-danger-color</label> <input class=form-control id=input-@btn-danger-color value=#fff data-var=@btn-danger-color> </div> <div class=col-xs-4> <label for=input-@btn-danger-bg>@btn-danger-bg</label> <input class=form-control id=input-@btn-danger-bg value=@brand-danger data-var=@btn-danger-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-danger-border>@btn-danger-border</label> <input class=form-control id=input-@btn-danger-border value="darken(@btn-danger-bg, 5%)" data-var=@btn-danger-border> </div> <div class=col-xs-4> <label for=input-@btn-link-disabled-color>@btn-link-disabled-color</label> <input class=form-control id=input-@btn-link-disabled-color value=@gray-light data-var=@btn-link-disabled-color> </div> <div class=col-xs-4> <label for=input-@btn-border-radius-base>@btn-border-radius-base</label> <input class=form-control id=input-@btn-border-radius-base value=@border-radius-base data-var=@btn-border-radius-base> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-border-radius-large>@btn-border-radius-large</label> <input class=form-control id=input-@btn-border-radius-large value=@border-radius-large data-var=@btn-border-radius-large> </div> <div class=col-xs-4> <label for=input-@btn-border-radius-small>@btn-border-radius-small</label> <input class=form-control id=input-@btn-border-radius-small value=@border-radius-small data-var=@btn-border-radius-small> </div> </div> <h2 id=forms>Forms</h2> <div class=row> <div class=col-xs-4> <label for=input-@input-bg>@input-bg</label> <input class=form-control id=input-@input-bg aria-describedby=help-block-@input-bg value=#fff data-var=@input-bg> <p class=help-block id=help-block-@input-bg><code><input></code> background color</p> </div> <div class=col-xs-4> <label for=input-@input-bg-disabled>@input-bg-disabled</label> <input class=form-control id=input-@input-bg-disabled aria-describedby=help-block-@input-bg-disabled value=@gray-lighter data-var=@input-bg-disabled> <p class=help-block id=help-block-@input-bg-disabled><code><input disabled></code> background color</p> </div> <div class=col-xs-4> <label for=input-@input-color>@input-color</label> <input class=form-control id=input-@input-color aria-describedby=help-block-@input-color value=@gray data-var=@input-color> <p class=help-block id=help-block-@input-color>Text color for <code><input></code>s</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-border>@input-border</label> <input class=form-control id=input-@input-border aria-describedby=help-block-@input-border value=#ccc data-var=@input-border> <p class=help-block id=help-block-@input-border><code><input></code> border color</p> </div> <div class=col-xs-4> <label for=input-@input-border-radius>@input-border-radius</label> <input class=form-control id=input-@input-border-radius aria-describedby=help-block-@input-border-radius value=@border-radius-base data-var=@input-border-radius> <p class=help-block id=help-block-@input-border-radius>Default <code>.form-control</code> border radius</p> </div> <div class=col-xs-4> <label for=input-@input-border-radius-large>@input-border-radius-large</label> <input class=form-control id=input-@input-border-radius-large aria-describedby=help-block-@input-border-radius-large value=@border-radius-large data-var=@input-border-radius-large> <p class=help-block id=help-block-@input-border-radius-large>Large <code>.form-control</code> border radius</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-border-radius-small>@input-border-radius-small</label> <input class=form-control id=input-@input-border-radius-small aria-describedby=help-block-@input-border-radius-small value=@border-radius-small data-var=@input-border-radius-small> <p class=help-block id=help-block-@input-border-radius-small>Small <code>.form-control</code> border radius</p> </div> <div class=col-xs-4> <label for=input-@input-border-focus>@input-border-focus</label> <input class=form-control id=input-@input-border-focus aria-describedby=help-block-@input-border-focus value=#66afe9 data-var=@input-border-focus> <p class=help-block id=help-block-@input-border-focus>Border color for inputs on focus</p> </div> <div class=col-xs-4> <label for=input-@input-color-placeholder>@input-color-placeholder</label> <input class=form-control id=input-@input-color-placeholder aria-describedby=help-block-@input-color-placeholder value=#999 data-var=@input-color-placeholder> <p class=help-block id=help-block-@input-color-placeholder>Placeholder text color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-height-base>@input-height-base</label> <input class=form-control id=input-@input-height-base aria-describedby=help-block-@input-height-base value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var=@input-height-base> <p class=help-block id=help-block-@input-height-base>Default <code>.form-control</code> height</p> </div> <div class=col-xs-4> <label for=input-@input-height-large>@input-height-large</label> <input class=form-control id=input-@input-height-large aria-describedby=help-block-@input-height-large value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var=@input-height-large> <p class=help-block id=help-block-@input-height-large>Large <code>.form-control</code> height</p> </div> <div class=col-xs-4> <label for=input-@input-height-small>@input-height-small</label> <input class=form-control id=input-@input-height-small aria-describedby=help-block-@input-height-small value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var=@input-height-small> <p class=help-block id=help-block-@input-height-small>Small <code>.form-control</code> height</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@form-group-margin-bottom>@form-group-margin-bottom</label> <input class=form-control id=input-@form-group-margin-bottom aria-describedby=help-block-@form-group-margin-bottom value=15px data-var=@form-group-margin-bottom> <p class=help-block id=help-block-@form-group-margin-bottom><code>.form-group</code> margin</p> </div> <div class=col-xs-4> <label for=input-@legend-color>@legend-color</label> <input class=form-control id=input-@legend-color value=@gray-dark data-var=@legend-color> </div> <div class=col-xs-4> <label for=input-@legend-border-color>@legend-border-color</label> <input class=form-control id=input-@legend-border-color value=#e5e5e5 data-var=@legend-border-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-group-addon-bg>@input-group-addon-bg</label> <input class=form-control id=input-@input-group-addon-bg aria-describedby=help-block-@input-group-addon-bg value=@gray-lighter data-var=@input-group-addon-bg> <p class=help-block id=help-block-@input-group-addon-bg>Background color for textual input addons</p> </div> <div class=col-xs-4> <label for=input-@input-group-addon-border-color>@input-group-addon-border-color</label> <input class=form-control id=input-@input-group-addon-border-color aria-describedby=help-block-@input-group-addon-border-color value=@input-border data-var=@input-group-addon-border-color> <p class=help-block id=help-block-@input-group-addon-border-color>Border color for textual input addons</p> </div> <div class=col-xs-4> <label for=input-@cursor-disabled>@cursor-disabled</label> <input class=form-control id=input-@cursor-disabled aria-describedby=help-block-@cursor-disabled value=not-allowed data-var=@cursor-disabled> <p class=help-block id=help-block-@cursor-disabled>Disabled cursor for form controls and buttons.</p> </div> </div> <h2 id=dropdowns>Dropdowns</h2> <p>Dropdown menu container and contents.</p> <div class=row> <div class=col-xs-4> <label for=input-@dropdown-bg>@dropdown-bg</label> <input class=form-control id=input-@dropdown-bg aria-describedby=help-block-@dropdown-bg value=#fff data-var=@dropdown-bg> <p class=help-block id=help-block-@dropdown-bg>Background for the dropdown menu.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-border>@dropdown-border</label> <input class=form-control id=input-@dropdown-border aria-describedby=help-block-@dropdown-border value=rgba(0,0,0,.15) data-var=@dropdown-border> <p class=help-block id=help-block-@dropdown-border>Dropdown menu <code>border-color</code>.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-fallback-border>@dropdown-fallback-border</label> <input class=form-control id=input-@dropdown-fallback-border aria-describedby=help-block-@dropdown-fallback-border value=#ccc data-var=@dropdown-fallback-border> <p class=help-block id=help-block-@dropdown-fallback-border>Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-divider-bg>@dropdown-divider-bg</label> <input class=form-control id=input-@dropdown-divider-bg aria-describedby=help-block-@dropdown-divider-bg value=#e5e5e5 data-var=@dropdown-divider-bg> <p class=help-block id=help-block-@dropdown-divider-bg>Divider color for between dropdown items.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-color>@dropdown-link-color</label> <input class=form-control id=input-@dropdown-link-color aria-describedby=help-block-@dropdown-link-color value=@gray-dark data-var=@dropdown-link-color> <p class=help-block id=help-block-@dropdown-link-color>Dropdown link text color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-hover-color>@dropdown-link-hover-color</label> <input class=form-control id=input-@dropdown-link-hover-color aria-describedby=help-block-@dropdown-link-hover-color value="darken(@gray-dark, 5%)" data-var=@dropdown-link-hover-color> <p class=help-block id=help-block-@dropdown-link-hover-color>Hover color for dropdown links.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-link-hover-bg>@dropdown-link-hover-bg</label> <input class=form-control id=input-@dropdown-link-hover-bg aria-describedby=help-block-@dropdown-link-hover-bg value=#f5f5f5 data-var=@dropdown-link-hover-bg> <p class=help-block id=help-block-@dropdown-link-hover-bg>Hover background for dropdown links.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-active-color>@dropdown-link-active-color</label> <input class=form-control id=input-@dropdown-link-active-color aria-describedby=help-block-@dropdown-link-active-color value=@component-active-color data-var=@dropdown-link-active-color> <p class=help-block id=help-block-@dropdown-link-active-color>Active dropdown menu item text color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-active-bg>@dropdown-link-active-bg</label> <input class=form-control id=input-@dropdown-link-active-bg aria-describedby=help-block-@dropdown-link-active-bg value=@component-active-bg data-var=@dropdown-link-active-bg> <p class=help-block id=help-block-@dropdown-link-active-bg>Active dropdown menu item background color.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-link-disabled-color>@dropdown-link-disabled-color</label> <input class=form-control id=input-@dropdown-link-disabled-color aria-describedby=help-block-@dropdown-link-disabled-color value=@gray-light data-var=@dropdown-link-disabled-color> <p class=help-block id=help-block-@dropdown-link-disabled-color>Disabled dropdown menu item background color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-header-color>@dropdown-header-color</label> <input class=form-control id=input-@dropdown-header-color aria-describedby=help-block-@dropdown-header-color value=@gray-light data-var=@dropdown-header-color> <p class=help-block id=help-block-@dropdown-header-color>Text color for headers within dropdown menus.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-caret-color>@dropdown-caret-color</label> <input class=form-control id=input-@dropdown-caret-color aria-describedby=help-block-@dropdown-caret-color value=#000 data-var=@dropdown-caret-color> <p class=help-block id=help-block-@dropdown-caret-color>Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> </div> </div> <h2 id=media-queries-breakpoints>Media queries breakpoints</h2> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <div class=row> <div class=col-xs-4> <label for=input-@screen-xs>@screen-xs</label> <input class=form-control id=input-@screen-xs aria-describedby=help-block-@screen-xs value=480px data-var=@screen-xs> <p class=help-block id=help-block-@screen-xs>Deprecated <code>@screen-xs</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-xs-min>@screen-xs-min</label> <input class=form-control id=input-@screen-xs-min aria-describedby=help-block-@screen-xs-min value=@screen-xs data-var=@screen-xs-min> <p class=help-block id=help-block-@screen-xs-min>Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> </div> <div class=col-xs-4> <label for=input-@screen-phone>@screen-phone</label> <input class=form-control id=input-@screen-phone aria-describedby=help-block-@screen-phone value=@screen-xs-min data-var=@screen-phone> <p class=help-block id=help-block-@screen-phone>Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-sm>@screen-sm</label> <input class=form-control id=input-@screen-sm aria-describedby=help-block-@screen-sm value=768px data-var=@screen-sm> <p class=help-block id=help-block-@screen-sm>Deprecated <code>@screen-sm</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-sm-min>@screen-sm-min</label> <input class=form-control id=input-@screen-sm-min value=@screen-sm data-var=@screen-sm-min> </div> <div class=col-xs-4> <label for=input-@screen-tablet>@screen-tablet</label> <input class=form-control id=input-@screen-tablet aria-describedby=help-block-@screen-tablet value=@screen-sm-min data-var=@screen-tablet> <p class=help-block id=help-block-@screen-tablet>Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-md>@screen-md</label> <input class=form-control id=input-@screen-md aria-describedby=help-block-@screen-md value=992px data-var=@screen-md> <p class=help-block id=help-block-@screen-md>Deprecated <code>@screen-md</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-md-min>@screen-md-min</label> <input class=form-control id=input-@screen-md-min value=@screen-md data-var=@screen-md-min> </div> <div class=col-xs-4> <label for=input-@screen-desktop>@screen-desktop</label> <input class=form-control id=input-@screen-desktop aria-describedby=help-block-@screen-desktop value=@screen-md-min data-var=@screen-desktop> <p class=help-block id=help-block-@screen-desktop>Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-lg>@screen-lg</label> <input class=form-control id=input-@screen-lg aria-describedby=help-block-@screen-lg value=1200px data-var=@screen-lg> <p class=help-block id=help-block-@screen-lg>Deprecated <code>@screen-lg</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-lg-min>@screen-lg-min</label> <input class=form-control id=input-@screen-lg-min value=@screen-lg data-var=@screen-lg-min> </div> <div class=col-xs-4> <label for=input-@screen-lg-desktop>@screen-lg-desktop</label> <input class=form-control id=input-@screen-lg-desktop aria-describedby=help-block-@screen-lg-desktop value=@screen-lg-min data-var=@screen-lg-desktop> <p class=help-block id=help-block-@screen-lg-desktop>Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-xs-max>@screen-xs-max</label> <input class=form-control id=input-@screen-xs-max value="(@screen-sm-min - 1)" data-var=@screen-xs-max> </div> <div class=col-xs-4> <label for=input-@screen-sm-max>@screen-sm-max</label> <input class=form-control id=input-@screen-sm-max value="(@screen-md-min - 1)" data-var=@screen-sm-max> </div> <div class=col-xs-4> <label for=input-@screen-md-max>@screen-md-max</label> <input class=form-control id=input-@screen-md-max value="(@screen-lg-min - 1)" data-var=@screen-md-max> </div> </div> <h2 id=grid-system>Grid system</h2> <p>Define your custom responsive grid.</p> <div class=row> <div class=col-xs-4> <label for=input-@grid-columns>@grid-columns</label> <input class=form-control id=input-@grid-columns aria-describedby=help-block-@grid-columns value=12 data-var=@grid-columns> <p class=help-block id=help-block-@grid-columns>Number of columns in the grid.</p> </div> <div class=col-xs-4> <label for=input-@grid-gutter-width>@grid-gutter-width</label> <input class=form-control id=input-@grid-gutter-width aria-describedby=help-block-@grid-gutter-width value=30px data-var=@grid-gutter-width> <p class=help-block id=help-block-@grid-gutter-width>Padding between columns. Gets divided in half for the left and right.</p> </div> <div class=col-xs-4> <label for=input-@grid-float-breakpoint>@grid-float-breakpoint</label> <input class=form-control id=input-@grid-float-breakpoint aria-describedby=help-block-@grid-float-breakpoint value=@screen-sm-min data-var=@grid-float-breakpoint> <p class=help-block id=help-block-@grid-float-breakpoint>Point at which the navbar becomes uncollapsed.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@grid-float-breakpoint-max>@grid-float-breakpoint-max</label> <input class=form-control id=input-@grid-float-breakpoint-max aria-describedby=help-block-@grid-float-breakpoint-max value="(@grid-float-breakpoint - 1)" data-var=@grid-float-breakpoint-max> <p class=help-block id=help-block-@grid-float-breakpoint-max>Point at which the navbar begins collapsing.</p> </div> </div> <h2 id=container-sizes>Container sizes</h2> <p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <div class=row> <div class=col-xs-4> <label for=input-@container-tablet>@container-tablet</label> <input class=form-control id=input-@container-tablet value="(720px + @grid-gutter-width)" data-var=@container-tablet> </div> <div class=col-xs-4> <label for=input-@container-sm>@container-sm</label> <input class=form-control id=input-@container-sm aria-describedby=help-block-@container-sm value=@container-tablet data-var=@container-sm> <p class=help-block id=help-block-@container-sm>For <code>@screen-sm-min</code> and up.</p> </div> <div class=col-xs-4> <label for=input-@container-desktop>@container-desktop</label> <input class=form-control id=input-@container-desktop value="(940px + @grid-gutter-width)" data-var=@container-desktop> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@container-md>@container-md</label> <input class=form-control id=input-@container-md aria-describedby=help-block-@container-md value=@container-desktop data-var=@container-md> <p class=help-block id=help-block-@container-md>For <code>@screen-md-min</code> and up.</p> </div> <div class=col-xs-4> <label for=input-@container-large-desktop>@container-large-desktop</label> <input class=form-control id=input-@container-large-desktop value="(1140px + @grid-gutter-width)" data-var=@container-large-desktop> </div> <div class=col-xs-4> <label for=input-@container-lg>@container-lg</label> <input class=form-control id=input-@container-lg aria-describedby=help-block-@container-lg value=@container-large-desktop data-var=@container-lg> <p class=help-block id=help-block-@container-lg>For <code>@screen-lg-min</code> and up.</p> </div> </div> <h2 id=navbar>Navbar</h2> <div class=row> <div class=col-xs-4> <label for=input-@navbar-height>@navbar-height</label> <input class=form-control id=input-@navbar-height value=50px data-var=@navbar-height> </div> <div class=col-xs-4> <label for=input-@navbar-margin-bottom>@navbar-margin-bottom</label> <input class=form-control id=input-@navbar-margin-bottom value=@line-height-computed data-var=@navbar-margin-bottom> </div> <div class=col-xs-4> <label for=input-@navbar-border-radius>@navbar-border-radius</label> <input class=form-control id=input-@navbar-border-radius value=@border-radius-base data-var=@navbar-border-radius> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-padding-horizontal>@navbar-padding-horizontal</label> <input class=form-control id=input-@navbar-padding-horizontal value="floor((@grid-gutter-width / 2))" data-var=@navbar-padding-horizontal> </div> <div class=col-xs-4> <label for=input-@navbar-padding-vertical>@navbar-padding-vertical</label> <input class=form-control id=input-@navbar-padding-vertical value="((@navbar-height - @line-height-computed) / 2)" data-var=@navbar-padding-vertical> </div> <div class=col-xs-4> <label for=input-@navbar-collapse-max-height>@navbar-collapse-max-height</label> <input class=form-control id=input-@navbar-collapse-max-height value=340px data-var=@navbar-collapse-max-height> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-color>@navbar-default-color</label> <input class=form-control id=input-@navbar-default-color value=#777 data-var=@navbar-default-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-bg>@navbar-default-bg</label> <input class=form-control id=input-@navbar-default-bg value=#f8f8f8 data-var=@navbar-default-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-border>@navbar-default-border</label> <input class=form-control id=input-@navbar-default-border value="darken(@navbar-default-bg, 6.5%)" data-var=@navbar-default-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-color>@navbar-default-link-color</label> <input class=form-control id=input-@navbar-default-link-color value=#777 data-var=@navbar-default-link-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-hover-color>@navbar-default-link-hover-color</label> <input class=form-control id=input-@navbar-default-link-hover-color value=#333 data-var=@navbar-default-link-hover-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-hover-bg>@navbar-default-link-hover-bg</label> <input class=form-control id=input-@navbar-default-link-hover-bg value=transparent data-var=@navbar-default-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-active-color>@navbar-default-link-active-color</label> <input class=form-control id=input-@navbar-default-link-active-color value=#555 data-var=@navbar-default-link-active-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-active-bg>@navbar-default-link-active-bg</label> <input class=form-control id=input-@navbar-default-link-active-bg value="darken(@navbar-default-bg, 6.5%)" data-var=@navbar-default-link-active-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-disabled-color>@navbar-default-link-disabled-color</label> <input class=form-control id=input-@navbar-default-link-disabled-color value=#ccc data-var=@navbar-default-link-disabled-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-disabled-bg>@navbar-default-link-disabled-bg</label> <input class=form-control id=input-@navbar-default-link-disabled-bg value=transparent data-var=@navbar-default-link-disabled-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-brand-color>@navbar-default-brand-color</label> <input class=form-control id=input-@navbar-default-brand-color value=@navbar-default-link-color data-var=@navbar-default-brand-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-brand-hover-color>@navbar-default-brand-hover-color</label> <input class=form-control id=input-@navbar-default-brand-hover-color value="darken(@navbar-default-brand-color, 10%)" data-var=@navbar-default-brand-hover-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-brand-hover-bg>@navbar-default-brand-hover-bg</label> <input class=form-control id=input-@navbar-default-brand-hover-bg value=transparent data-var=@navbar-default-brand-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-hover-bg>@navbar-default-toggle-hover-bg</label> <input class=form-control id=input-@navbar-default-toggle-hover-bg value=#ddd data-var=@navbar-default-toggle-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-icon-bar-bg>@navbar-default-toggle-icon-bar-bg</label> <input class=form-control id=input-@navbar-default-toggle-icon-bar-bg value=#888 data-var=@navbar-default-toggle-icon-bar-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-border-color>@navbar-default-toggle-border-color</label> <input class=form-control id=input-@navbar-default-toggle-border-color value=#ddd data-var=@navbar-default-toggle-border-color> </div> </div> <h3 id=inverted-navbar>Inverted navbar</h3> <div class=row> <div class=col-xs-4> <label for=input-@navbar-inverse-color>@navbar-inverse-color</label> <input class=form-control id=input-@navbar-inverse-color value="lighten(@gray-light, 15%)" data-var=@navbar-inverse-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-bg>@navbar-inverse-bg</label> <input class=form-control id=input-@navbar-inverse-bg value=#222 data-var=@navbar-inverse-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-border>@navbar-inverse-border</label> <input class=form-control id=input-@navbar-inverse-border value="darken(@navbar-inverse-bg, 10%)" data-var=@navbar-inverse-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-color>@navbar-inverse-link-color</label> <input class=form-control id=input-@navbar-inverse-link-color value="lighten(@gray-light, 15%)" data-var=@navbar-inverse-link-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-hover-color>@navbar-inverse-link-hover-color</label> <input class=form-control id=input-@navbar-inverse-link-hover-color value=#fff data-var=@navbar-inverse-link-hover-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-hover-bg>@navbar-inverse-link-hover-bg</label> <input class=form-control id=input-@navbar-inverse-link-hover-bg value=transparent data-var=@navbar-inverse-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-active-color>@navbar-inverse-link-active-color</label> <input class=form-control id=input-@navbar-inverse-link-active-color value=@navbar-inverse-link-hover-color data-var=@navbar-inverse-link-active-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-active-bg>@navbar-inverse-link-active-bg</label> <input class=form-control id=input-@navbar-inverse-link-active-bg value="darken(@navbar-inverse-bg, 10%)" data-var=@navbar-inverse-link-active-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-disabled-color>@navbar-inverse-link-disabled-color</label> <input class=form-control id=input-@navbar-inverse-link-disabled-color value=#444 data-var=@navbar-inverse-link-disabled-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-disabled-bg>@navbar-inverse-link-disabled-bg</label> <input class=form-control id=input-@navbar-inverse-link-disabled-bg value=transparent data-var=@navbar-inverse-link-disabled-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-color>@navbar-inverse-brand-color</label> <input class=form-control id=input-@navbar-inverse-brand-color value=@navbar-inverse-link-color data-var=@navbar-inverse-brand-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-hover-color>@navbar-inverse-brand-hover-color</label> <input class=form-control id=input-@navbar-inverse-brand-hover-color value=#fff data-var=@navbar-inverse-brand-hover-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-hover-bg>@navbar-inverse-brand-hover-bg</label> <input class=form-control id=input-@navbar-inverse-brand-hover-bg value=transparent data-var=@navbar-inverse-brand-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-hover-bg>@navbar-inverse-toggle-hover-bg</label> <input class=form-control id=input-@navbar-inverse-toggle-hover-bg value=#333 data-var=@navbar-inverse-toggle-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-icon-bar-bg>@navbar-inverse-toggle-icon-bar-bg</label> <input class=form-control id=input-@navbar-inverse-toggle-icon-bar-bg value=#fff data-var=@navbar-inverse-toggle-icon-bar-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-border-color>@navbar-inverse-toggle-border-color</label> <input class=form-control id=input-@navbar-inverse-toggle-border-color value=#333 data-var=@navbar-inverse-toggle-border-color> </div> </div> <h2 id=navs>Navs</h2> <h3 id=shared-nav-styles>Shared nav styles</h3> <div class=row> <div class=col-xs-4> <label for=input-@nav-link-padding>@nav-link-padding</label> <input class=form-control id=input-@nav-link-padding value="10px 15px" data-var=@nav-link-padding> </div> <div class=col-xs-4> <label for=input-@nav-link-hover-bg>@nav-link-hover-bg</label> <input class=form-control id=input-@nav-link-hover-bg value=@gray-lighter data-var=@nav-link-hover-bg> </div> <div class=col-xs-4> <label for=input-@nav-disabled-link-color>@nav-disabled-link-color</label> <input class=form-control id=input-@nav-disabled-link-color value=@gray-light data-var=@nav-disabled-link-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-disabled-link-hover-color>@nav-disabled-link-hover-color</label> <input class=form-control id=input-@nav-disabled-link-hover-color value=@gray-light data-var=@nav-disabled-link-hover-color> </div> </div> <h2 id=tabs>Tabs</h2> <div class=row> <div class=col-xs-4> <label for=input-@nav-tabs-border-color>@nav-tabs-border-color</label> <input class=form-control id=input-@nav-tabs-border-color value=#ddd data-var=@nav-tabs-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-link-hover-border-color>@nav-tabs-link-hover-border-color</label> <input class=form-control id=input-@nav-tabs-link-hover-border-color value=@gray-lighter data-var=@nav-tabs-link-hover-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-bg>@nav-tabs-active-link-hover-bg</label> <input class=form-control id=input-@nav-tabs-active-link-hover-bg value=@body-bg data-var=@nav-tabs-active-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-color>@nav-tabs-active-link-hover-color</label> <input class=form-control id=input-@nav-tabs-active-link-hover-color value=@gray data-var=@nav-tabs-active-link-hover-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-border-color>@nav-tabs-active-link-hover-border-color</label> <input class=form-control id=input-@nav-tabs-active-link-hover-border-color value=#ddd data-var=@nav-tabs-active-link-hover-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-justified-link-border-color>@nav-tabs-justified-link-border-color</label> <input class=form-control id=input-@nav-tabs-justified-link-border-color value=#ddd data-var=@nav-tabs-justified-link-border-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-tabs-justified-active-link-border-color>@nav-tabs-justified-active-link-border-color</label> <input class=form-control id=input-@nav-tabs-justified-active-link-border-color value=@body-bg data-var=@nav-tabs-justified-active-link-border-color> </div> </div> <h2 id=pills>Pills</h2> <div class=row> <div class=col-xs-4> <label for=input-@nav-pills-border-radius>@nav-pills-border-radius</label> <input class=form-control id=input-@nav-pills-border-radius value=@border-radius-base data-var=@nav-pills-border-radius> </div> <div class=col-xs-4> <label for=input-@nav-pills-active-link-hover-bg>@nav-pills-active-link-hover-bg</label> <input class=form-control id=input-@nav-pills-active-link-hover-bg value=@component-active-bg data-var=@nav-pills-active-link-hover-bg> </div> <div class=col-xs-4> <label for=input-@nav-pills-active-link-hover-color>@nav-pills-active-link-hover-color</label> <input class=form-control id=input-@nav-pills-active-link-hover-color value=@component-active-color data-var=@nav-pills-active-link-hover-color> </div> </div> <h2 id=pagination>Pagination</h2> <div class=row> <div class=col-xs-4> <label for=input-@pagination-color>@pagination-color</label> <input class=form-control id=input-@pagination-color value=@link-color data-var=@pagination-color> </div> <div class=col-xs-4> <label for=input-@pagination-bg>@pagination-bg</label> <input class=form-control id=input-@pagination-bg value=#fff data-var=@pagination-bg> </div> <div class=col-xs-4> <label for=input-@pagination-border>@pagination-border</label> <input class=form-control id=input-@pagination-border value=#ddd data-var=@pagination-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-hover-color>@pagination-hover-color</label> <input class=form-control id=input-@pagination-hover-color value=@link-hover-color data-var=@pagination-hover-color> </div> <div class=col-xs-4> <label for=input-@pagination-hover-bg>@pagination-hover-bg</label> <input class=form-control id=input-@pagination-hover-bg value=@gray-lighter data-var=@pagination-hover-bg> </div> <div class=col-xs-4> <label for=input-@pagination-hover-border>@pagination-hover-border</label> <input class=form-control id=input-@pagination-hover-border value=#ddd data-var=@pagination-hover-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-active-color>@pagination-active-color</label> <input class=form-control id=input-@pagination-active-color value=#fff data-var=@pagination-active-color> </div> <div class=col-xs-4> <label for=input-@pagination-active-bg>@pagination-active-bg</label> <input class=form-control id=input-@pagination-active-bg value=@brand-primary data-var=@pagination-active-bg> </div> <div class=col-xs-4> <label for=input-@pagination-active-border>@pagination-active-border</label> <input class=form-control id=input-@pagination-active-border value=@brand-primary data-var=@pagination-active-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-disabled-color>@pagination-disabled-color</label> <input class=form-control id=input-@pagination-disabled-color value=@gray-light data-var=@pagination-disabled-color> </div> <div class=col-xs-4> <label for=input-@pagination-disabled-bg>@pagination-disabled-bg</label> <input class=form-control id=input-@pagination-disabled-bg value=#fff data-var=@pagination-disabled-bg> </div> <div class=col-xs-4> <label for=input-@pagination-disabled-border>@pagination-disabled-border</label> <input class=form-control id=input-@pagination-disabled-border value=#ddd data-var=@pagination-disabled-border> </div> </div> <h2 id=pager>Pager</h2> <div class=row> <div class=col-xs-4> <label for=input-@pager-bg>@pager-bg</label> <input class=form-control id=input-@pager-bg value=@pagination-bg data-var=@pager-bg> </div> <div class=col-xs-4> <label for=input-@pager-border>@pager-border</label> <input class=form-control id=input-@pager-border value=@pagination-border data-var=@pager-border> </div> <div class=col-xs-4> <label for=input-@pager-border-radius>@pager-border-radius</label> <input class=form-control id=input-@pager-border-radius value=15px data-var=@pager-border-radius> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pager-hover-bg>@pager-hover-bg</label> <input class=form-control id=input-@pager-hover-bg value=@pagination-hover-bg data-var=@pager-hover-bg> </div> <div class=col-xs-4> <label for=input-@pager-active-bg>@pager-active-bg</label> <input class=form-control id=input-@pager-active-bg value=@pagination-active-bg data-var=@pager-active-bg> </div> <div class=col-xs-4> <label for=input-@pager-active-color>@pager-active-color</label> <input class=form-control id=input-@pager-active-color value=@pagination-active-color data-var=@pager-active-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pager-disabled-color>@pager-disabled-color</label> <input class=form-control id=input-@pager-disabled-color value=@pagination-disabled-color data-var=@pager-disabled-color> </div> </div> <h2 id=jumbotron>Jumbotron</h2> <div class=row> <div class=col-xs-4> <label for=input-@jumbotron-padding>@jumbotron-padding</label> <input class=form-control id=input-@jumbotron-padding value=30px data-var=@jumbotron-padding> </div> <div class=col-xs-4> <label for=input-@jumbotron-color>@jumbotron-color</label> <input class=form-control id=input-@jumbotron-color value=inherit data-var=@jumbotron-color> </div> <div class=col-xs-4> <label for=input-@jumbotron-bg>@jumbotron-bg</label> <input class=form-control id=input-@jumbotron-bg value=@gray-lighter data-var=@jumbotron-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@jumbotron-heading-color>@jumbotron-heading-color</label> <input class=form-control id=input-@jumbotron-heading-color value=inherit data-var=@jumbotron-heading-color> </div> <div class=col-xs-4> <label for=input-@jumbotron-font-size>@jumbotron-font-size</label> <input class=form-control id=input-@jumbotron-font-size value="ceil((@font-size-base * 1.5))" data-var=@jumbotron-font-size> </div> <div class=col-xs-4> <label for=input-@jumbotron-heading-font-size>@jumbotron-heading-font-size</label> <input class=form-control id=input-@jumbotron-heading-font-size value="ceil((@font-size-base * 4.5))" data-var=@jumbotron-heading-font-size> </div> </div> <h2 id=form-states-and-alerts>Form states and alerts</h2> <p>Define colors for form feedback states and, by default, alerts.</p> <div class=row> <div class=col-xs-4> <label for=input-@state-success-text>@state-success-text</label> <input class=form-control id=input-@state-success-text value=#3c763d data-var=@state-success-text> </div> <div class=col-xs-4> <label for=input-@state-success-bg>@state-success-bg</label> <input class=form-control id=input-@state-success-bg value=#dff0d8 data-var=@state-success-bg> </div> <div class=col-xs-4> <label for=input-@state-success-border>@state-success-border</label> <input class=form-control id=input-@state-success-border value="darken(spin(@state-success-bg, -10), 5%)" data-var=@state-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-info-text>@state-info-text</label> <input class=form-control id=input-@state-info-text value=#31708f data-var=@state-info-text> </div> <div class=col-xs-4> <label for=input-@state-info-bg>@state-info-bg</label> <input class=form-control id=input-@state-info-bg value=#d9edf7 data-var=@state-info-bg> </div> <div class=col-xs-4> <label for=input-@state-info-border>@state-info-border</label> <input class=form-control id=input-@state-info-border value="darken(spin(@state-info-bg, -10), 7%)" data-var=@state-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-warning-text>@state-warning-text</label> <input class=form-control id=input-@state-warning-text value=#8a6d3b data-var=@state-warning-text> </div> <div class=col-xs-4> <label for=input-@state-warning-bg>@state-warning-bg</label> <input class=form-control id=input-@state-warning-bg value=#fcf8e3 data-var=@state-warning-bg> </div> <div class=col-xs-4> <label for=input-@state-warning-border>@state-warning-border</label> <input class=form-control id=input-@state-warning-border value="darken(spin(@state-warning-bg, -10), 5%)" data-var=@state-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-danger-text>@state-danger-text</label> <input class=form-control id=input-@state-danger-text value=#a94442 data-var=@state-danger-text> </div> <div class=col-xs-4> <label for=input-@state-danger-bg>@state-danger-bg</label> <input class=form-control id=input-@state-danger-bg value=#f2dede data-var=@state-danger-bg> </div> <div class=col-xs-4> <label for=input-@state-danger-border>@state-danger-border</label> <input class=form-control id=input-@state-danger-border value="darken(spin(@state-danger-bg, -10), 5%)" data-var=@state-danger-border> </div> </div> <h2 id=tooltips>Tooltips</h2> <div class=row> <div class=col-xs-4> <label for=input-@tooltip-max-width>@tooltip-max-width</label> <input class=form-control id=input-@tooltip-max-width aria-describedby=help-block-@tooltip-max-width value=200px data-var=@tooltip-max-width> <p class=help-block id=help-block-@tooltip-max-width>Tooltip max width</p> </div> <div class=col-xs-4> <label for=input-@tooltip-color>@tooltip-color</label> <input class=form-control id=input-@tooltip-color aria-describedby=help-block-@tooltip-color value=#fff data-var=@tooltip-color> <p class=help-block id=help-block-@tooltip-color>Tooltip text color</p> </div> <div class=col-xs-4> <label for=input-@tooltip-bg>@tooltip-bg</label> <input class=form-control id=input-@tooltip-bg aria-describedby=help-block-@tooltip-bg value=#000 data-var=@tooltip-bg> <p class=help-block id=help-block-@tooltip-bg>Tooltip background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@tooltip-opacity>@tooltip-opacity</label> <input class=form-control id=input-@tooltip-opacity value=.9 data-var=@tooltip-opacity> </div> <div class=col-xs-4> <label for=input-@tooltip-arrow-width>@tooltip-arrow-width</label> <input class=form-control id=input-@tooltip-arrow-width aria-describedby=help-block-@tooltip-arrow-width value=5px data-var=@tooltip-arrow-width> <p class=help-block id=help-block-@tooltip-arrow-width>Tooltip arrow width</p> </div> <div class=col-xs-4> <label for=input-@tooltip-arrow-color>@tooltip-arrow-color</label> <input class=form-control id=input-@tooltip-arrow-color aria-describedby=help-block-@tooltip-arrow-color value=@tooltip-bg data-var=@tooltip-arrow-color> <p class=help-block id=help-block-@tooltip-arrow-color>Tooltip arrow color</p> </div> </div> <h2 id=popovers>Popovers</h2> <div class=row> <div class=col-xs-4> <label for=input-@popover-bg>@popover-bg</label> <input class=form-control id=input-@popover-bg aria-describedby=help-block-@popover-bg value=#fff data-var=@popover-bg> <p class=help-block id=help-block-@popover-bg>Popover body background color</p> </div> <div class=col-xs-4> <label for=input-@popover-max-width>@popover-max-width</label> <input class=form-control id=input-@popover-max-width aria-describedby=help-block-@popover-max-width value=276px data-var=@popover-max-width> <p class=help-block id=help-block-@popover-max-width>Popover maximum width</p> </div> <div class=col-xs-4> <label for=input-@popover-border-color>@popover-border-color</label> <input class=form-control id=input-@popover-border-color aria-describedby=help-block-@popover-border-color value=rgba(0,0,0,.2) data-var=@popover-border-color> <p class=help-block id=help-block-@popover-border-color>Popover border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-fallback-border-color>@popover-fallback-border-color</label> <input class=form-control id=input-@popover-fallback-border-color aria-describedby=help-block-@popover-fallback-border-color value=#ccc data-var=@popover-fallback-border-color> <p class=help-block id=help-block-@popover-fallback-border-color>Popover fallback border color</p> </div> <div class=col-xs-4> <label for=input-@popover-title-bg>@popover-title-bg</label> <input class=form-control id=input-@popover-title-bg aria-describedby=help-block-@popover-title-bg value="darken(@popover-bg, 3%)" data-var=@popover-title-bg> <p class=help-block id=help-block-@popover-title-bg>Popover title background color</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-width>@popover-arrow-width</label> <input class=form-control id=input-@popover-arrow-width aria-describedby=help-block-@popover-arrow-width value=10px data-var=@popover-arrow-width> <p class=help-block id=help-block-@popover-arrow-width>Popover arrow width</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-arrow-color>@popover-arrow-color</label> <input class=form-control id=input-@popover-arrow-color aria-describedby=help-block-@popover-arrow-color value=@popover-bg data-var=@popover-arrow-color> <p class=help-block id=help-block-@popover-arrow-color>Popover arrow color</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-width>@popover-arrow-outer-width</label> <input class=form-control id=input-@popover-arrow-outer-width aria-describedby=help-block-@popover-arrow-outer-width value="(@popover-arrow-width + 1)" data-var=@popover-arrow-outer-width> <p class=help-block id=help-block-@popover-arrow-outer-width>Popover outer arrow width</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-color>@popover-arrow-outer-color</label> <input class=form-control id=input-@popover-arrow-outer-color aria-describedby=help-block-@popover-arrow-outer-color value="fadein(@popover-border-color, 5%)" data-var=@popover-arrow-outer-color> <p class=help-block id=help-block-@popover-arrow-outer-color>Popover outer arrow color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-fallback-color>@popover-arrow-outer-fallback-color</label> <input class=form-control id=input-@popover-arrow-outer-fallback-color aria-describedby=help-block-@popover-arrow-outer-fallback-color value="darken(@popover-fallback-border-color, 20%)" data-var=@popover-arrow-outer-fallback-color> <p class=help-block id=help-block-@popover-arrow-outer-fallback-color>Popover outer arrow fallback color</p> </div> </div> <h2 id=labels>Labels</h2> <div class=row> <div class=col-xs-4> <label for=input-@label-default-bg>@label-default-bg</label> <input class=form-control id=input-@label-default-bg aria-describedby=help-block-@label-default-bg value=@gray-light data-var=@label-default-bg> <p class=help-block id=help-block-@label-default-bg>Default label background color</p> </div> <div class=col-xs-4> <label for=input-@label-primary-bg>@label-primary-bg</label> <input class=form-control id=input-@label-primary-bg aria-describedby=help-block-@label-primary-bg value=@brand-primary data-var=@label-primary-bg> <p class=help-block id=help-block-@label-primary-bg>Primary label background color</p> </div> <div class=col-xs-4> <label for=input-@label-success-bg>@label-success-bg</label> <input class=form-control id=input-@label-success-bg aria-describedby=help-block-@label-success-bg value=@brand-success data-var=@label-success-bg> <p class=help-block id=help-block-@label-success-bg>Success label background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@label-info-bg>@label-info-bg</label> <input class=form-control id=input-@label-info-bg aria-describedby=help-block-@label-info-bg value=@brand-info data-var=@label-info-bg> <p class=help-block id=help-block-@label-info-bg>Info label background color</p> </div> <div class=col-xs-4> <label for=input-@label-warning-bg>@label-warning-bg</label> <input class=form-control id=input-@label-warning-bg aria-describedby=help-block-@label-warning-bg value=@brand-warning data-var=@label-warning-bg> <p class=help-block id=help-block-@label-warning-bg>Warning label background color</p> </div> <div class=col-xs-4> <label for=input-@label-danger-bg>@label-danger-bg</label> <input class=form-control id=input-@label-danger-bg aria-describedby=help-block-@label-danger-bg value=@brand-danger data-var=@label-danger-bg> <p class=help-block id=help-block-@label-danger-bg>Danger label background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@label-color>@label-color</label> <input class=form-control id=input-@label-color aria-describedby=help-block-@label-color value=#fff data-var=@label-color> <p class=help-block id=help-block-@label-color>Default label text color</p> </div> <div class=col-xs-4> <label for=input-@label-link-hover-color>@label-link-hover-color</label> <input class=form-control id=input-@label-link-hover-color aria-describedby=help-block-@label-link-hover-color value=#fff data-var=@label-link-hover-color> <p class=help-block id=help-block-@label-link-hover-color>Default text color of a linked label</p> </div> </div> <h2 id=modals>Modals</h2> <div class=row> <div class=col-xs-4> <label for=input-@modal-inner-padding>@modal-inner-padding</label> <input class=form-control id=input-@modal-inner-padding aria-describedby=help-block-@modal-inner-padding value=15px data-var=@modal-inner-padding> <p class=help-block id=help-block-@modal-inner-padding>Padding applied to the modal body</p> </div> <div class=col-xs-4> <label for=input-@modal-title-padding>@modal-title-padding</label> <input class=form-control id=input-@modal-title-padding aria-describedby=help-block-@modal-title-padding value=15px data-var=@modal-title-padding> <p class=help-block id=help-block-@modal-title-padding>Padding applied to the modal title</p> </div> <div class=col-xs-4> <label for=input-@modal-title-line-height>@modal-title-line-height</label> <input class=form-control id=input-@modal-title-line-height aria-describedby=help-block-@modal-title-line-height value=@line-height-base data-var=@modal-title-line-height> <p class=help-block id=help-block-@modal-title-line-height>Modal title line-height</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-content-bg>@modal-content-bg</label> <input class=form-control id=input-@modal-content-bg aria-describedby=help-block-@modal-content-bg value=#fff data-var=@modal-content-bg> <p class=help-block id=help-block-@modal-content-bg>Background color of modal content area</p> </div> <div class=col-xs-4> <label for=input-@modal-content-border-color>@modal-content-border-color</label> <input class=form-control id=input-@modal-content-border-color aria-describedby=help-block-@modal-content-border-color value=rgba(0,0,0,.2) data-var=@modal-content-border-color> <p class=help-block id=help-block-@modal-content-border-color>Modal content border color</p> </div> <div class=col-xs-4> <label for=input-@modal-content-fallback-border-color>@modal-content-fallback-border-color</label> <input class=form-control id=input-@modal-content-fallback-border-color aria-describedby=help-block-@modal-content-fallback-border-color value=#999 data-var=@modal-content-fallback-border-color> <p class=help-block id=help-block-@modal-content-fallback-border-color>Modal content border color <strong>for IE8</strong></p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-backdrop-bg>@modal-backdrop-bg</label> <input class=form-control id=input-@modal-backdrop-bg aria-describedby=help-block-@modal-backdrop-bg value=#000 data-var=@modal-backdrop-bg> <p class=help-block id=help-block-@modal-backdrop-bg>Modal backdrop background color</p> </div> <div class=col-xs-4> <label for=input-@modal-backdrop-opacity>@modal-backdrop-opacity</label> <input class=form-control id=input-@modal-backdrop-opacity aria-describedby=help-block-@modal-backdrop-opacity value=.5 data-var=@modal-backdrop-opacity> <p class=help-block id=help-block-@modal-backdrop-opacity>Modal backdrop opacity</p> </div> <div class=col-xs-4> <label for=input-@modal-header-border-color>@modal-header-border-color</label> <input class=form-control id=input-@modal-header-border-color aria-describedby=help-block-@modal-header-border-color value=#e5e5e5 data-var=@modal-header-border-color> <p class=help-block id=help-block-@modal-header-border-color>Modal header border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-footer-border-color>@modal-footer-border-color</label> <input class=form-control id=input-@modal-footer-border-color aria-describedby=help-block-@modal-footer-border-color value=@modal-header-border-color data-var=@modal-footer-border-color> <p class=help-block id=help-block-@modal-footer-border-color>Modal footer border color</p> </div> <div class=col-xs-4> <label for=input-@modal-lg>@modal-lg</label> <input class=form-control id=input-@modal-lg value=900px data-var=@modal-lg> </div> <div class=col-xs-4> <label for=input-@modal-md>@modal-md</label> <input class=form-control id=input-@modal-md value=600px data-var=@modal-md> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-sm>@modal-sm</label> <input class=form-control id=input-@modal-sm value=300px data-var=@modal-sm> </div> </div> <h2 id=alerts>Alerts</h2> <p>Define alert colors, border radius, and padding.</p> <div class=row> <div class=col-xs-4> <label for=input-@alert-padding>@alert-padding</label> <input class=form-control id=input-@alert-padding value=15px data-var=@alert-padding> </div> <div class=col-xs-4> <label for=input-@alert-border-radius>@alert-border-radius</label> <input class=form-control id=input-@alert-border-radius value=@border-radius-base data-var=@alert-border-radius> </div> <div class=col-xs-4> <label for=input-@alert-link-font-weight>@alert-link-font-weight</label> <input class=form-control id=input-@alert-link-font-weight value=bold data-var=@alert-link-font-weight> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-success-bg>@alert-success-bg</label> <input class=form-control id=input-@alert-success-bg value=@state-success-bg data-var=@alert-success-bg> </div> <div class=col-xs-4> <label for=input-@alert-success-text>@alert-success-text</label> <input class=form-control id=input-@alert-success-text value=@state-success-text data-var=@alert-success-text> </div> <div class=col-xs-4> <label for=input-@alert-success-border>@alert-success-border</label> <input class=form-control id=input-@alert-success-border value=@state-success-border data-var=@alert-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-info-bg>@alert-info-bg</label> <input class=form-control id=input-@alert-info-bg value=@state-info-bg data-var=@alert-info-bg> </div> <div class=col-xs-4> <label for=input-@alert-info-text>@alert-info-text</label> <input class=form-control id=input-@alert-info-text value=@state-info-text data-var=@alert-info-text> </div> <div class=col-xs-4> <label for=input-@alert-info-border>@alert-info-border</label> <input class=form-control id=input-@alert-info-border value=@state-info-border data-var=@alert-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-warning-bg>@alert-warning-bg</label> <input class=form-control id=input-@alert-warning-bg value=@state-warning-bg data-var=@alert-warning-bg> </div> <div class=col-xs-4> <label for=input-@alert-warning-text>@alert-warning-text</label> <input class=form-control id=input-@alert-warning-text value=@state-warning-text data-var=@alert-warning-text> </div> <div class=col-xs-4> <label for=input-@alert-warning-border>@alert-warning-border</label> <input class=form-control id=input-@alert-warning-border value=@state-warning-border data-var=@alert-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-danger-bg>@alert-danger-bg</label> <input class=form-control id=input-@alert-danger-bg value=@state-danger-bg data-var=@alert-danger-bg> </div> <div class=col-xs-4> <label for=input-@alert-danger-text>@alert-danger-text</label> <input class=form-control id=input-@alert-danger-text value=@state-danger-text data-var=@alert-danger-text> </div> <div class=col-xs-4> <label for=input-@alert-danger-border>@alert-danger-border</label> <input class=form-control id=input-@alert-danger-border value=@state-danger-border data-var=@alert-danger-border> </div> </div> <h2 id=progress-bars>Progress bars</h2> <div class=row> <div class=col-xs-4> <label for=input-@progress-bg>@progress-bg</label> <input class=form-control id=input-@progress-bg aria-describedby=help-block-@progress-bg value=#f5f5f5 data-var=@progress-bg> <p class=help-block id=help-block-@progress-bg>Background color of the whole progress component</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-color>@progress-bar-color</label> <input class=form-control id=input-@progress-bar-color aria-describedby=help-block-@progress-bar-color value=#fff data-var=@progress-bar-color> <p class=help-block id=help-block-@progress-bar-color>Progress bar text color</p> </div> <div class=col-xs-4> <label for=input-@progress-border-radius>@progress-border-radius</label> <input class=form-control id=input-@progress-border-radius aria-describedby=help-block-@progress-border-radius value=@border-radius-base data-var=@progress-border-radius> <p class=help-block id=help-block-@progress-border-radius>Variable for setting rounded corners on progress bar.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@progress-bar-bg>@progress-bar-bg</label> <input class=form-control id=input-@progress-bar-bg aria-describedby=help-block-@progress-bar-bg value=@brand-primary data-var=@progress-bar-bg> <p class=help-block id=help-block-@progress-bar-bg>Default progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-success-bg>@progress-bar-success-bg</label> <input class=form-control id=input-@progress-bar-success-bg aria-describedby=help-block-@progress-bar-success-bg value=@brand-success data-var=@progress-bar-success-bg> <p class=help-block id=help-block-@progress-bar-success-bg>Success progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-warning-bg>@progress-bar-warning-bg</label> <input class=form-control id=input-@progress-bar-warning-bg aria-describedby=help-block-@progress-bar-warning-bg value=@brand-warning data-var=@progress-bar-warning-bg> <p class=help-block id=help-block-@progress-bar-warning-bg>Warning progress bar color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@progress-bar-danger-bg>@progress-bar-danger-bg</label> <input class=form-control id=input-@progress-bar-danger-bg aria-describedby=help-block-@progress-bar-danger-bg value=@brand-danger data-var=@progress-bar-danger-bg> <p class=help-block id=help-block-@progress-bar-danger-bg>Danger progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-info-bg>@progress-bar-info-bg</label> <input class=form-control id=input-@progress-bar-info-bg aria-describedby=help-block-@progress-bar-info-bg value=@brand-info data-var=@progress-bar-info-bg> <p class=help-block id=help-block-@progress-bar-info-bg>Info progress bar color</p> </div> </div> <h2 id=list-group>List group</h2> <div class=row> <div class=col-xs-4> <label for=input-@list-group-bg>@list-group-bg</label> <input class=form-control id=input-@list-group-bg aria-describedby=help-block-@list-group-bg value=#fff data-var=@list-group-bg> <p class=help-block id=help-block-@list-group-bg>Background color on <code>.list-group-item</code></p> </div> <div class=col-xs-4> <label for=input-@list-group-border>@list-group-border</label> <input class=form-control id=input-@list-group-border aria-describedby=help-block-@list-group-border value=#ddd data-var=@list-group-border> <p class=help-block id=help-block-@list-group-border><code>.list-group-item</code> border color</p> </div> <div class=col-xs-4> <label for=input-@list-group-border-radius>@list-group-border-radius</label> <input class=form-control id=input-@list-group-border-radius aria-describedby=help-block-@list-group-border-radius value=@border-radius-base data-var=@list-group-border-radius> <p class=help-block id=help-block-@list-group-border-radius>List group border radius</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-hover-bg>@list-group-hover-bg</label> <input class=form-control id=input-@list-group-hover-bg aria-describedby=help-block-@list-group-hover-bg value=#f5f5f5 data-var=@list-group-hover-bg> <p class=help-block id=help-block-@list-group-hover-bg>Background color of single list items on hover</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-color>@list-group-active-color</label> <input class=form-control id=input-@list-group-active-color aria-describedby=help-block-@list-group-active-color value=@component-active-color data-var=@list-group-active-color> <p class=help-block id=help-block-@list-group-active-color>Text color of active list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-bg>@list-group-active-bg</label> <input class=form-control id=input-@list-group-active-bg aria-describedby=help-block-@list-group-active-bg value=@component-active-bg data-var=@list-group-active-bg> <p class=help-block id=help-block-@list-group-active-bg>Background color of active list items</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-active-border>@list-group-active-border</label> <input class=form-control id=input-@list-group-active-border aria-describedby=help-block-@list-group-active-border value=@list-group-active-bg data-var=@list-group-active-border> <p class=help-block id=help-block-@list-group-active-border>Border color of active list elements</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-text-color>@list-group-active-text-color</label> <input class=form-control id=input-@list-group-active-text-color aria-describedby=help-block-@list-group-active-text-color value="lighten(@list-group-active-bg, 40%)" data-var=@list-group-active-text-color> <p class=help-block id=help-block-@list-group-active-text-color>Text color for content within active list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-disabled-color>@list-group-disabled-color</label> <input class=form-control id=input-@list-group-disabled-color aria-describedby=help-block-@list-group-disabled-color value=@gray-light data-var=@list-group-disabled-color> <p class=help-block id=help-block-@list-group-disabled-color>Text color of disabled list items</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-disabled-bg>@list-group-disabled-bg</label> <input class=form-control id=input-@list-group-disabled-bg aria-describedby=help-block-@list-group-disabled-bg value=@gray-lighter data-var=@list-group-disabled-bg> <p class=help-block id=help-block-@list-group-disabled-bg>Background color of disabled list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-disabled-text-color>@list-group-disabled-text-color</label> <input class=form-control id=input-@list-group-disabled-text-color aria-describedby=help-block-@list-group-disabled-text-color value=@list-group-disabled-color data-var=@list-group-disabled-text-color> <p class=help-block id=help-block-@list-group-disabled-text-color>Text color for content within disabled list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-link-color>@list-group-link-color</label> <input class=form-control id=input-@list-group-link-color value=#555 data-var=@list-group-link-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-link-hover-color>@list-group-link-hover-color</label> <input class=form-control id=input-@list-group-link-hover-color value=@list-group-link-color data-var=@list-group-link-hover-color> </div> <div class=col-xs-4> <label for=input-@list-group-link-heading-color>@list-group-link-heading-color</label> <input class=form-control id=input-@list-group-link-heading-color value=#333 data-var=@list-group-link-heading-color> </div> </div> <h2 id=panels>Panels</h2> <div class=row> <div class=col-xs-4> <label for=input-@panel-bg>@panel-bg</label> <input class=form-control id=input-@panel-bg value=#fff data-var=@panel-bg> </div> <div class=col-xs-4> <label for=input-@panel-body-padding>@panel-body-padding</label> <input class=form-control id=input-@panel-body-padding value=15px data-var=@panel-body-padding> </div> <div class=col-xs-4> <label for=input-@panel-heading-padding>@panel-heading-padding</label> <input class=form-control id=input-@panel-heading-padding value="10px 15px" data-var=@panel-heading-padding> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-footer-padding>@panel-footer-padding</label> <input class=form-control id=input-@panel-footer-padding value=@panel-heading-padding data-var=@panel-footer-padding> </div> <div class=col-xs-4> <label for=input-@panel-border-radius>@panel-border-radius</label> <input class=form-control id=input-@panel-border-radius value=@border-radius-base data-var=@panel-border-radius> </div> <div class=col-xs-4> <label for=input-@panel-inner-border>@panel-inner-border</label> <input class=form-control id=input-@panel-inner-border aria-describedby=help-block-@panel-inner-border value=#ddd data-var=@panel-inner-border> <p class=help-block id=help-block-@panel-inner-border>Border color for elements within panels</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-footer-bg>@panel-footer-bg</label> <input class=form-control id=input-@panel-footer-bg value=#f5f5f5 data-var=@panel-footer-bg> </div> <div class=col-xs-4> <label for=input-@panel-default-text>@panel-default-text</label> <input class=form-control id=input-@panel-default-text value=@gray-dark data-var=@panel-default-text> </div> <div class=col-xs-4> <label for=input-@panel-default-border>@panel-default-border</label> <input class=form-control id=input-@panel-default-border value=#ddd data-var=@panel-default-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-default-heading-bg>@panel-default-heading-bg</label> <input class=form-control id=input-@panel-default-heading-bg value=#f5f5f5 data-var=@panel-default-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-primary-text>@panel-primary-text</label> <input class=form-control id=input-@panel-primary-text value=#fff data-var=@panel-primary-text> </div> <div class=col-xs-4> <label for=input-@panel-primary-border>@panel-primary-border</label> <input class=form-control id=input-@panel-primary-border value=@brand-primary data-var=@panel-primary-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-primary-heading-bg>@panel-primary-heading-bg</label> <input class=form-control id=input-@panel-primary-heading-bg value=@brand-primary data-var=@panel-primary-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-success-text>@panel-success-text</label> <input class=form-control id=input-@panel-success-text value=@state-success-text data-var=@panel-success-text> </div> <div class=col-xs-4> <label for=input-@panel-success-border>@panel-success-border</label> <input class=form-control id=input-@panel-success-border value=@state-success-border data-var=@panel-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-success-heading-bg>@panel-success-heading-bg</label> <input class=form-control id=input-@panel-success-heading-bg value=@state-success-bg data-var=@panel-success-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-info-text>@panel-info-text</label> <input class=form-control id=input-@panel-info-text value=@state-info-text data-var=@panel-info-text> </div> <div class=col-xs-4> <label for=input-@panel-info-border>@panel-info-border</label> <input class=form-control id=input-@panel-info-border value=@state-info-border data-var=@panel-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-info-heading-bg>@panel-info-heading-bg</label> <input class=form-control id=input-@panel-info-heading-bg value=@state-info-bg data-var=@panel-info-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-warning-text>@panel-warning-text</label> <input class=form-control id=input-@panel-warning-text value=@state-warning-text data-var=@panel-warning-text> </div> <div class=col-xs-4> <label for=input-@panel-warning-border>@panel-warning-border</label> <input class=form-control id=input-@panel-warning-border value=@state-warning-border data-var=@panel-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-warning-heading-bg>@panel-warning-heading-bg</label> <input class=form-control id=input-@panel-warning-heading-bg value=@state-warning-bg data-var=@panel-warning-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-danger-text>@panel-danger-text</label> <input class=form-control id=input-@panel-danger-text value=@state-danger-text data-var=@panel-danger-text> </div> <div class=col-xs-4> <label for=input-@panel-danger-border>@panel-danger-border</label> <input class=form-control id=input-@panel-danger-border value=@state-danger-border data-var=@panel-danger-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-danger-heading-bg>@panel-danger-heading-bg</label> <input class=form-control id=input-@panel-danger-heading-bg value=@state-danger-bg data-var=@panel-danger-heading-bg> </div> </div> <h2 id=thumbnails>Thumbnails</h2> <div class=row> <div class=col-xs-4> <label for=input-@thumbnail-padding>@thumbnail-padding</label> <input class=form-control id=input-@thumbnail-padding aria-describedby=help-block-@thumbnail-padding value=4px data-var=@thumbnail-padding> <p class=help-block id=help-block-@thumbnail-padding>Padding around the thumbnail image</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-bg>@thumbnail-bg</label> <input class=form-control id=input-@thumbnail-bg aria-describedby=help-block-@thumbnail-bg value=@body-bg data-var=@thumbnail-bg> <p class=help-block id=help-block-@thumbnail-bg>Thumbnail background color</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-border>@thumbnail-border</label> <input class=form-control id=input-@thumbnail-border aria-describedby=help-block-@thumbnail-border value=#ddd data-var=@thumbnail-border> <p class=help-block id=help-block-@thumbnail-border>Thumbnail border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@thumbnail-border-radius>@thumbnail-border-radius</label> <input class=form-control id=input-@thumbnail-border-radius aria-describedby=help-block-@thumbnail-border-radius value=@border-radius-base data-var=@thumbnail-border-radius> <p class=help-block id=help-block-@thumbnail-border-radius>Thumbnail border radius</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-caption-color>@thumbnail-caption-color</label> <input class=form-control id=input-@thumbnail-caption-color aria-describedby=help-block-@thumbnail-caption-color value=@text-color data-var=@thumbnail-caption-color> <p class=help-block id=help-block-@thumbnail-caption-color>Custom text color for thumbnail captions</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-caption-padding>@thumbnail-caption-padding</label> <input class=form-control id=input-@thumbnail-caption-padding aria-describedby=help-block-@thumbnail-caption-padding value=9px data-var=@thumbnail-caption-padding> <p class=help-block id=help-block-@thumbnail-caption-padding>Padding around the thumbnail caption</p> </div> </div> <h2 id=wells>Wells</h2> <div class=row> <div class=col-xs-4> <label for=input-@well-bg>@well-bg</label> <input class=form-control id=input-@well-bg value=#f5f5f5 data-var=@well-bg> </div> <div class=col-xs-4> <label for=input-@well-border>@well-border</label> <input class=form-control id=input-@well-border value="darken(@well-bg, 7%)" data-var=@well-border> </div> </div> <h2 id=badges>Badges</h2> <div class=row> <div class=col-xs-4> <label for=input-@badge-color>@badge-color</label> <input class=form-control id=input-@badge-color value=#fff data-var=@badge-color> </div> <div class=col-xs-4> <label for=input-@badge-link-hover-color>@badge-link-hover-color</label> <input class=form-control id=input-@badge-link-hover-color aria-describedby=help-block-@badge-link-hover-color value=#fff data-var=@badge-link-hover-color> <p class=help-block id=help-block-@badge-link-hover-color>Linked badge text color on hover</p> </div> <div class=col-xs-4> <label for=input-@badge-bg>@badge-bg</label> <input class=form-control id=input-@badge-bg value=@gray-light data-var=@badge-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@badge-active-color>@badge-active-color</label> <input class=form-control id=input-@badge-active-color aria-describedby=help-block-@badge-active-color value=@link-color data-var=@badge-active-color> <p class=help-block id=help-block-@badge-active-color>Badge text color in active nav link</p> </div> <div class=col-xs-4> <label for=input-@badge-active-bg>@badge-active-bg</label> <input class=form-control id=input-@badge-active-bg aria-describedby=help-block-@badge-active-bg value=#fff data-var=@badge-active-bg> <p class=help-block id=help-block-@badge-active-bg>Badge background color in active nav link</p> </div> <div class=col-xs-4> <label for=input-@badge-font-weight>@badge-font-weight</label> <input class=form-control id=input-@badge-font-weight value=bold data-var=@badge-font-weight> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@badge-line-height>@badge-line-height</label> <input class=form-control id=input-@badge-line-height value=1 data-var=@badge-line-height> </div> <div class=col-xs-4> <label for=input-@badge-border-radius>@badge-border-radius</label> <input class=form-control id=input-@badge-border-radius value=10px data-var=@badge-border-radius> </div> </div> <h2 id=breadcrumbs>Breadcrumbs</h2> <div class=row> <div class=col-xs-4> <label for=input-@breadcrumb-padding-vertical>@breadcrumb-padding-vertical</label> <input class=form-control id=input-@breadcrumb-padding-vertical value=8px data-var=@breadcrumb-padding-vertical> </div> <div class=col-xs-4> <label for=input-@breadcrumb-padding-horizontal>@breadcrumb-padding-horizontal</label> <input class=form-control id=input-@breadcrumb-padding-horizontal value=15px data-var=@breadcrumb-padding-horizontal> </div> <div class=col-xs-4> <label for=input-@breadcrumb-bg>@breadcrumb-bg</label> <input class=form-control id=input-@breadcrumb-bg aria-describedby=help-block-@breadcrumb-bg value=#f5f5f5 data-var=@breadcrumb-bg> <p class=help-block id=help-block-@breadcrumb-bg>Breadcrumb background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@breadcrumb-color>@breadcrumb-color</label> <input class=form-control id=input-@breadcrumb-color aria-describedby=help-block-@breadcrumb-color value=#ccc data-var=@breadcrumb-color> <p class=help-block id=help-block-@breadcrumb-color>Breadcrumb text color</p> </div> <div class=col-xs-4> <label for=input-@breadcrumb-active-color>@breadcrumb-active-color</label> <input class=form-control id=input-@breadcrumb-active-color aria-describedby=help-block-@breadcrumb-active-color value=@gray-light data-var=@breadcrumb-active-color> <p class=help-block id=help-block-@breadcrumb-active-color>Text color of current page in the breadcrumb</p> </div> <div class=col-xs-4> <label for=input-@breadcrumb-separator>@breadcrumb-separator</label> <input class=form-control id=input-@breadcrumb-separator aria-describedby=help-block-@breadcrumb-separator value="/" data-var=@breadcrumb-separator> <p class=help-block id=help-block-@breadcrumb-separator>Textual separator for between breadcrumb elements</p> </div> </div> <h2 id=carousel>Carousel</h2> <div class=row> <div class=col-xs-4> <label for=input-@carousel-text-shadow>@carousel-text-shadow</label> <input class=form-control id=input-@carousel-text-shadow value="0 1px 2px rgba(0,0,0,.6)" data-var=@carousel-text-shadow> </div> <div class=col-xs-4> <label for=input-@carousel-control-color>@carousel-control-color</label> <input class=form-control id=input-@carousel-control-color value=#fff data-var=@carousel-control-color> </div> <div class=col-xs-4> <label for=input-@carousel-control-width>@carousel-control-width</label> <input class=form-control id=input-@carousel-control-width value=15% data-var=@carousel-control-width> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@carousel-control-opacity>@carousel-control-opacity</label> <input class=form-control id=input-@carousel-control-opacity value=.5 data-var=@carousel-control-opacity> </div> <div class=col-xs-4> <label for=input-@carousel-control-font-size>@carousel-control-font-size</label> <input class=form-control id=input-@carousel-control-font-size value=20px data-var=@carousel-control-font-size> </div> <div class=col-xs-4> <label for=input-@carousel-indicator-active-bg>@carousel-indicator-active-bg</label> <input class=form-control id=input-@carousel-indicator-active-bg value=#fff data-var=@carousel-indicator-active-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@carousel-indicator-border-color>@carousel-indicator-border-color</label> <input class=form-control id=input-@carousel-indicator-border-color value=#fff data-var=@carousel-indicator-border-color> </div> <div class=col-xs-4> <label for=input-@carousel-caption-color>@carousel-caption-color</label> <input class=form-control id=input-@carousel-caption-color value=#fff data-var=@carousel-caption-color> </div> </div> <h2 id=close>Close</h2> <div class=row> <div class=col-xs-4> <label for=input-@close-font-weight>@close-font-weight</label> <input class=form-control id=input-@close-font-weight value=bold data-var=@close-font-weight> </div> <div class=col-xs-4> <label for=input-@close-color>@close-color</label> <input class=form-control id=input-@close-color value=#000 data-var=@close-color> </div> <div class=col-xs-4> <label for=input-@close-text-shadow>@close-text-shadow</label> <input class=form-control id=input-@close-text-shadow value="0 1px 0 #fff" data-var=@close-text-shadow> </div> </div> <h2 id=code>Code</h2> <div class=row> <div class=col-xs-4> <label for=input-@code-color>@code-color</label> <input class=form-control id=input-@code-color value=#c7254e data-var=@code-color> </div> <div class=col-xs-4> <label for=input-@code-bg>@code-bg</label> <input class=form-control id=input-@code-bg value=#f9f2f4 data-var=@code-bg> </div> <div class=col-xs-4> <label for=input-@kbd-color>@kbd-color</label> <input class=form-control id=input-@kbd-color value=#fff data-var=@kbd-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@kbd-bg>@kbd-bg</label> <input class=form-control id=input-@kbd-bg value=#333 data-var=@kbd-bg> </div> <div class=col-xs-4> <label for=input-@pre-bg>@pre-bg</label> <input class=form-control id=input-@pre-bg value=#f5f5f5 data-var=@pre-bg> </div> <div class=col-xs-4> <label for=input-@pre-color>@pre-color</label> <input class=form-control id=input-@pre-color value=@gray-dark data-var=@pre-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pre-border-color>@pre-border-color</label> <input class=form-control id=input-@pre-border-color value=#ccc data-var=@pre-border-color> </div> <div class=col-xs-4> <label for=input-@pre-scrollable-max-height>@pre-scrollable-max-height</label> <input class=form-control id=input-@pre-scrollable-max-height value=340px data-var=@pre-scrollable-max-height> </div> </div> <h2 id=type>Type</h2> <div class=row> <div class=col-xs-4> <label for=input-@component-offset-horizontal>@component-offset-horizontal</label> <input class=form-control id=input-@component-offset-horizontal aria-describedby=help-block-@component-offset-horizontal value=180px data-var=@component-offset-horizontal> <p class=help-block id=help-block-@component-offset-horizontal>Horizontal offset for forms and lists.</p> </div> <div class=col-xs-4> <label for=input-@text-muted>@text-muted</label> <input class=form-control id=input-@text-muted aria-describedby=help-block-@text-muted value=@gray-light data-var=@text-muted> <p class=help-block id=help-block-@text-muted>Text muted color</p> </div> <div class=col-xs-4> <label for=input-@abbr-border-color>@abbr-border-color</label> <input class=form-control id=input-@abbr-border-color aria-describedby=help-block-@abbr-border-color value=@gray-light data-var=@abbr-border-color> <p class=help-block id=help-block-@abbr-border-color>Abbreviations and acronyms border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-small-color>@headings-small-color</label> <input class=form-control id=input-@headings-small-color aria-describedby=help-block-@headings-small-color value=@gray-light data-var=@headings-small-color> <p class=help-block id=help-block-@headings-small-color>Headings small color</p> </div> <div class=col-xs-4> <label for=input-@blockquote-small-color>@blockquote-small-color</label> <input class=form-control id=input-@blockquote-small-color aria-describedby=help-block-@blockquote-small-color value=@gray-light data-var=@blockquote-small-color> <p class=help-block id=help-block-@blockquote-small-color>Blockquote small color</p> </div> <div class=col-xs-4> <label for=input-@blockquote-font-size>@blockquote-font-size</label> <input class=form-control id=input-@blockquote-font-size aria-describedby=help-block-@blockquote-font-size value="(@font-size-base * 1.25)" data-var=@blockquote-font-size> <p class=help-block id=help-block-@blockquote-font-size>Blockquote font size</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@blockquote-border-color>@blockquote-border-color</label> <input class=form-control id=input-@blockquote-border-color aria-describedby=help-block-@blockquote-border-color value=@gray-lighter data-var=@blockquote-border-color> <p class=help-block id=help-block-@blockquote-border-color>Blockquote border color</p> </div> <div class=col-xs-4> <label for=input-@page-header-border-color>@page-header-border-color</label> <input class=form-control id=input-@page-header-border-color aria-describedby=help-block-@page-header-border-color value=@gray-lighter data-var=@page-header-border-color> <p class=help-block id=help-block-@page-header-border-color>Page header border color</p> </div> <div class=col-xs-4> <label for=input-@dl-horizontal-offset>@dl-horizontal-offset</label> <input class=form-control id=input-@dl-horizontal-offset aria-describedby=help-block-@dl-horizontal-offset value=@component-offset-horizontal data-var=@dl-horizontal-offset> <p class=help-block id=help-block-@dl-horizontal-offset>Width of horizontal description list titles</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dl-horizontal-breakpoint>@dl-horizontal-breakpoint</label> <input class=form-control id=input-@dl-horizontal-breakpoint aria-describedby=help-block-@dl-horizontal-breakpoint value=@grid-float-breakpoint data-var=@dl-horizontal-breakpoint> <p class=help-block id=help-block-@dl-horizontal-breakpoint>Point at which .dl-horizontal becomes horizontal</p> </div> <div class=col-xs-4> <label for=input-@hr-border>@hr-border</label> <input class=form-control id=input-@hr-border aria-describedby=help-block-@hr-border value=@gray-lighter data-var=@hr-border> <p class=help-block id=help-block-@hr-border>Horizontal line color.</p> </div> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p> <div class=bs-customize-download> <button type=submit id=btn-compile disabled class="btn btn-block btn-lg btn-outline" onclick='ga("send","event","Customize","Download","Customize and Download")'>Compile and Download</button> </div> </div> </form> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li><a href=#import-drop-target>Import</a></li> <li><a href=#less>Less components</a></li> <li><a href=#plugins>jQuery plugins</a></li> <li><a href=#less-variables>Less variables</a> <ul class=nav> <li><a href=#colors>Colors</a></li> <li><a href=#scaffolding>Scaffolding</a></li> <li><a href=#typography>Typography</a></li> <li><a href=#iconography>Iconography</a></li> <li><a href=#components>Components</a></li> <li><a href=#tables>Tables</a></li> <li><a href=#buttons>Buttons</a></li> <li><a href=#forms>Forms</a></li> <li><a href=#dropdowns>Dropdowns</a></li> <li><a href=#media-queries-breakpoints>Media queries breakpoints</a></li> <li><a href=#grid-system>Grid system</a></li> <li><a href=#container-sizes>Container sizes</a></li> <li><a href=#navbar>Navbar</a></li> <li><a href=#navs>Navs</a></li> <li><a href=#tabs>Tabs</a></li> <li><a href=#pills>Pills</a></li> <li><a href=#pagination>Pagination</a></li> <li><a href=#pager>Pager</a></li> <li><a href=#jumbotron>Jumbotron</a></li> <li><a href=#form-states-and-alerts>Form states and alerts</a></li> <li><a href=#tooltips>Tooltips</a></li> <li><a href=#popovers>Popovers</a></li> <li><a href=#labels>Labels</a></li> <li><a href=#modals>Modals</a></li> <li><a href=#alerts>Alerts</a></li> <li><a href=#progress-bars>Progress bars</a></li> <li><a href=#list-group>List group</a></li> <li><a href=#panels>Panels</a></li> <li><a href=#thumbnails>Thumbnails</a></li> <li><a href=#wells>Wells</a></li> <li><a href=#badges>Badges</a></li> <li><a href=#breadcrumbs>Breadcrumbs</a></li> <li><a href=#carousel>Carousel</a></li> <li><a href=#close>Close</a></li> <li><a href=#code>Code</a></li> <li><a href=#type>Type</a></li> </ul> </li> <li><a href=#download>Download</a></li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script>var __configBridge={autoprefixerBrowsers:["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],jqueryCheck:["if (typeof jQuery === 'undefined') {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery')","}\n"],jqueryVersionCheck:["+function ($) {"," 'use strict';"," var version = $.fn.jquery.split(' ')[0].split('.')"," if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')"," }","}(jQuery);\n\n"]}</script> <script src=../assets/js/customize.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Customize and download · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li class=active> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Customize and download</h1> <p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <!--[if lt IE 9]> <style>.bs-customizer,.bs-customizer-import,.bs-docs-sidebar{display:none}</style> <div class="alert alert-danger"> <strong>The Bootstrap Customizer does not support IE9 and below.</strong><br> Please take a second to <a href=http://browsehappy.com/ >upgrade to a more modern browser</a>. </div> <![endif]--> <div class="alert alert-warning alert-dismissible" role=alert id=defaults-change-alert> <button type=button class=close data-dismiss=alert aria-label=Close><span aria-hidden=true>×</span></button> <strong>Heads up!</strong> The default value for <code>@brand-primary</code> has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading. </div> <div class="bs-docs-section bs-customizer-import"> <div class=bs-dropzone id=import-drop-target> <div class=import-header> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> </div> <p class=lead>Have an existing configuration? Upload your <code>config.json</code> to import it.</p> <p>Drag and drop here, or <label id=import-manual-trigger class=btn-link>manually upload<input type=file id=import-file-select class=hidden></label>.</p> <hr> <p><strong>Don't have one?</strong> That's okay—just start customizing the fields below.</p> </div> </div> <form class=bs-customizer> <div class=bs-docs-section id=less-section> <button class="btn btn-default toggle" type=button>Toggle all</button> <h1 class=page-header id=less>Less files</h1> <p class=lead>Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href=../css/ >CSS</a> and <a href=../components/ >Components</a> pages in the docs.</p> <div class=row> <div class="col-xs-6 col-sm-4"> <h3>Common CSS</h3> <div class=checkbox> <label> <input type=checkbox checked value=print.less> Print media styles </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=type.less> Typography </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=code.less> Code </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=grid.less> Grid system </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tables.less> Tables </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=forms.less data-dependents=navbar.less,input-groups.less> Forms </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=buttons.less data-dependents=button-groups.less> Buttons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=responsive-utilities.less> Responsive utilities </label> </div> </div> <div class="col-xs-6 col-sm-4"> <h3>Components</h3> <div class=checkbox> <label> <input type=checkbox checked value=glyphicons.less> Glyphicons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=button-groups.less data-dependencies=buttons.less> Button groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=input-groups.less data-dependencies=forms.less> Input groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=navs.less data-dependents=navbar.less> Navs </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=navbar.less data-dependencies=forms.less,navs.less> Navbar </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=breadcrumbs.less> Breadcrumbs </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=pagination.less> Pagination </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=pager.less> Pager </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=labels.less> Labels </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=badges.less> Badges </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=jumbotron.less> Jumbotron </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=thumbnails.less> Thumbnails </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=alerts.less> Alerts </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=progress-bars.less> Progress bars </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=media.less> Media items </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=list-group.less> List groups </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=panels.less> Panels </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=responsive-embed.less> Responsive embed </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=wells.less> Wells </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=close.less> Close icon </label> </div> </div> <div class="col-xs-6 col-sm-4"> <h3>JavaScript components</h3> <div class=checkbox> <label> <input type=checkbox checked value=component-animations.less> Component animations (for JS)<br> (includes Collapse) </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=dropdowns.less> Dropdown </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tooltip.less> Tooltip </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=popovers.less> Popover </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=modals.less> Modal </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=carousel.less> Carousel </label> </div> </div> </div> </div> <div class=bs-docs-section id=plugin-section> <button class="btn btn-default toggle" type=button>Toggle all</button> <h1 class=page-header id=plugins>jQuery plugins</h1> <p class=lead>Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href=../javascript/ >JavaScript</a> page in the docs.</p> <div class=row> <div class=col-lg-6> <h4>Linked to components</h4> <div class=checkbox> <label> <input type=checkbox checked value=alert.js> Alert dismissal </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=button.js> Advanced buttons </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=carousel.js> Carousel functionality </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=dropdown.js> Dropdowns </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=modal.js> Modals </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tooltip.js> Tooltips </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=popover.js data-dependencies=tooltip.js> Popovers <small>(requires Tooltips)</small> </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=tab.js> Togglable tabs </label> </div> </div> <div class=col-lg-6> <h4>Magic</h4> <div class=checkbox> <label> <input type=checkbox checked value=affix.js> Affix </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=collapse.js> Collapse </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=scrollspy.js> Scrollspy </label> </div> <div class=checkbox> <label> <input type=checkbox checked value=transition.js> Transitions <small>(required for any kind of animation)</small> </label> </div> </div> </div> <div class="bs-callout bs-callout-info"> <h4>Produces two files</h4> <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p> </div> <div class="bs-callout bs-callout-danger"> <h4>jQuery required</h4> <p>All plugins require the latest version of <a href=http://jquery.com/ target=_blank>jQuery</a> to be included.</p> </div> </div> <div class=bs-docs-section id=less-variables-section> <button class="btn btn-default toggle" type=button>Reset to defaults</button> <h1 class=page-header id=less-variables>Less variables</h1> <p class=lead>Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p> <h2 id=colors>Colors</h2> <p>Gray and brand colors for use across Bootstrap.</p> <div class=row> <div class=col-xs-4> <label for=input-@gray-base>@gray-base</label> <input class=form-control id=input-@gray-base value=#000 data-var=@gray-base> </div> <div class=col-xs-4> <label for=input-@gray-darker>@gray-darker</label> <input class=form-control id=input-@gray-darker value="lighten(@gray-base, 13.5%)" data-var=@gray-darker> </div> <div class=col-xs-4> <label for=input-@gray-dark>@gray-dark</label> <input class=form-control id=input-@gray-dark value="lighten(@gray-base, 20%)" data-var=@gray-dark> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@gray>@gray</label> <input class=form-control id=input-@gray value="lighten(@gray-base, 33.5%)" data-var=@gray> </div> <div class=col-xs-4> <label for=input-@gray-light>@gray-light</label> <input class=form-control id=input-@gray-light value="lighten(@gray-base, 46.7%)" data-var=@gray-light> </div> <div class=col-xs-4> <label for=input-@gray-lighter>@gray-lighter</label> <input class=form-control id=input-@gray-lighter value="lighten(@gray-base, 93.5%)" data-var=@gray-lighter> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@brand-primary>@brand-primary</label> <input class=form-control id=input-@brand-primary value="darken(#428bca, 6.5%)" data-var=@brand-primary> </div> <div class=col-xs-4> <label for=input-@brand-success>@brand-success</label> <input class=form-control id=input-@brand-success value=#5cb85c data-var=@brand-success> </div> <div class=col-xs-4> <label for=input-@brand-info>@brand-info</label> <input class=form-control id=input-@brand-info value=#5bc0de data-var=@brand-info> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@brand-warning>@brand-warning</label> <input class=form-control id=input-@brand-warning value=#f0ad4e data-var=@brand-warning> </div> <div class=col-xs-4> <label for=input-@brand-danger>@brand-danger</label> <input class=form-control id=input-@brand-danger value=#d9534f data-var=@brand-danger> </div> </div> <h2 id=scaffolding>Scaffolding</h2> <p>Settings for some of the most global styles.</p> <div class=row> <div class=col-xs-4> <label for=input-@body-bg>@body-bg</label> <input class=form-control id=input-@body-bg aria-describedby=help-block-@body-bg value=#fff data-var=@body-bg> <p class=help-block id=help-block-@body-bg>Background color for <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@text-color>@text-color</label> <input class=form-control id=input-@text-color aria-describedby=help-block-@text-color value=@gray-dark data-var=@text-color> <p class=help-block id=help-block-@text-color>Global text color on <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@link-color>@link-color</label> <input class=form-control id=input-@link-color aria-describedby=help-block-@link-color value=@brand-primary data-var=@link-color> <p class=help-block id=help-block-@link-color>Global textual link color.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@link-hover-color>@link-hover-color</label> <input class=form-control id=input-@link-hover-color aria-describedby=help-block-@link-hover-color value="darken(@link-color, 15%)" data-var=@link-hover-color> <p class=help-block id=help-block-@link-hover-color>Link hover color set via <code>darken()</code> function.</p> </div> <div class=col-xs-4> <label for=input-@link-hover-decoration>@link-hover-decoration</label> <input class=form-control id=input-@link-hover-decoration aria-describedby=help-block-@link-hover-decoration value=underline data-var=@link-hover-decoration> <p class=help-block id=help-block-@link-hover-decoration>Link hover decoration.</p> </div> </div> <h2 id=typography>Typography</h2> <p>Font, line-height, and color for body text, headings, and more.</p> <div class=row> <div class=col-xs-4> <label for=input-@font-family-sans-serif>@font-family-sans-serif</label> <input class=form-control id=input-@font-family-sans-serif value=""Helvetica Neue", Helvetica, Arial, sans-serif" data-var=@font-family-sans-serif> </div> <div class=col-xs-4> <label for=input-@font-family-serif>@font-family-serif</label> <input class=form-control id=input-@font-family-serif value="Georgia, "Times New Roman", Times, serif" data-var=@font-family-serif> </div> <div class=col-xs-4> <label for=input-@font-family-monospace>@font-family-monospace</label> <input class=form-control id=input-@font-family-monospace aria-describedby=help-block-@font-family-monospace value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var=@font-family-monospace> <p class=help-block id=help-block-@font-family-monospace>Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-family-base>@font-family-base</label> <input class=form-control id=input-@font-family-base value=@font-family-sans-serif data-var=@font-family-base> </div> <div class=col-xs-4> <label for=input-@font-size-base>@font-size-base</label> <input class=form-control id=input-@font-size-base value=14px data-var=@font-size-base> </div> <div class=col-xs-4> <label for=input-@font-size-large>@font-size-large</label> <input class=form-control id=input-@font-size-large value="ceil((@font-size-base * 1.25))" data-var=@font-size-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-small>@font-size-small</label> <input class=form-control id=input-@font-size-small value="ceil((@font-size-base * 0.85))" data-var=@font-size-small> </div> <div class=col-xs-4> <label for=input-@font-size-h1>@font-size-h1</label> <input class=form-control id=input-@font-size-h1 value="floor((@font-size-base * 2.6))" data-var=@font-size-h1> </div> <div class=col-xs-4> <label for=input-@font-size-h2>@font-size-h2</label> <input class=form-control id=input-@font-size-h2 value="floor((@font-size-base * 2.15))" data-var=@font-size-h2> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-h3>@font-size-h3</label> <input class=form-control id=input-@font-size-h3 value="ceil((@font-size-base * 1.7))" data-var=@font-size-h3> </div> <div class=col-xs-4> <label for=input-@font-size-h4>@font-size-h4</label> <input class=form-control id=input-@font-size-h4 value="ceil((@font-size-base * 1.25))" data-var=@font-size-h4> </div> <div class=col-xs-4> <label for=input-@font-size-h5>@font-size-h5</label> <input class=form-control id=input-@font-size-h5 value=@font-size-base data-var=@font-size-h5> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@font-size-h6>@font-size-h6</label> <input class=form-control id=input-@font-size-h6 value="ceil((@font-size-base * 0.85))" data-var=@font-size-h6> </div> <div class=col-xs-4> <label for=input-@line-height-base>@line-height-base</label> <input class=form-control id=input-@line-height-base aria-describedby=help-block-@line-height-base value=1.428571429 data-var=@line-height-base> <p class=help-block id=help-block-@line-height-base>Unit-less <code>line-height</code> for use in components like buttons.</p> </div> <div class=col-xs-4> <label for=input-@line-height-computed>@line-height-computed</label> <input class=form-control id=input-@line-height-computed aria-describedby=help-block-@line-height-computed value="floor((@font-size-base * @line-height-base))" data-var=@line-height-computed> <p class=help-block id=help-block-@line-height-computed>Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-font-family>@headings-font-family</label> <input class=form-control id=input-@headings-font-family aria-describedby=help-block-@headings-font-family value=inherit data-var=@headings-font-family> <p class=help-block id=help-block-@headings-font-family>By default, this inherits from the <code><body></code>.</p> </div> <div class=col-xs-4> <label for=input-@headings-font-weight>@headings-font-weight</label> <input class=form-control id=input-@headings-font-weight value=500 data-var=@headings-font-weight> </div> <div class=col-xs-4> <label for=input-@headings-line-height>@headings-line-height</label> <input class=form-control id=input-@headings-line-height value=1.1 data-var=@headings-line-height> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-color>@headings-color</label> <input class=form-control id=input-@headings-color value=inherit data-var=@headings-color> </div> </div> <h2 id=iconography>Iconography</h2> <p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p> <div class=row> <div class=col-xs-4> <label for=input-@icon-font-path>@icon-font-path</label> <input class=form-control id=input-@icon-font-path aria-describedby=help-block-@icon-font-path value="../fonts/" data-var=@icon-font-path> <p class=help-block id=help-block-@icon-font-path>Load fonts from this directory.</p> </div> <div class=col-xs-4> <label for=input-@icon-font-name>@icon-font-name</label> <input class=form-control id=input-@icon-font-name aria-describedby=help-block-@icon-font-name value="glyphicons-halflings-regular" data-var=@icon-font-name> <p class=help-block id=help-block-@icon-font-name>File name for all font files.</p> </div> <div class=col-xs-4> <label for=input-@icon-font-svg-id>@icon-font-svg-id</label> <input class=form-control id=input-@icon-font-svg-id aria-describedby=help-block-@icon-font-svg-id value="glyphicons_halflingsregular" data-var=@icon-font-svg-id> <p class=help-block id=help-block-@icon-font-svg-id>Element ID within SVG icon file.</p> </div> </div> <h2 id=components>Components</h2> <p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p> <div class=row> <div class=col-xs-4> <label for=input-@padding-base-vertical>@padding-base-vertical</label> <input class=form-control id=input-@padding-base-vertical value=6px data-var=@padding-base-vertical> </div> <div class=col-xs-4> <label for=input-@padding-base-horizontal>@padding-base-horizontal</label> <input class=form-control id=input-@padding-base-horizontal value=12px data-var=@padding-base-horizontal> </div> <div class=col-xs-4> <label for=input-@padding-large-vertical>@padding-large-vertical</label> <input class=form-control id=input-@padding-large-vertical value=10px data-var=@padding-large-vertical> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@padding-large-horizontal>@padding-large-horizontal</label> <input class=form-control id=input-@padding-large-horizontal value=16px data-var=@padding-large-horizontal> </div> <div class=col-xs-4> <label for=input-@padding-small-vertical>@padding-small-vertical</label> <input class=form-control id=input-@padding-small-vertical value=5px data-var=@padding-small-vertical> </div> <div class=col-xs-4> <label for=input-@padding-small-horizontal>@padding-small-horizontal</label> <input class=form-control id=input-@padding-small-horizontal value=10px data-var=@padding-small-horizontal> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@padding-xs-vertical>@padding-xs-vertical</label> <input class=form-control id=input-@padding-xs-vertical value=1px data-var=@padding-xs-vertical> </div> <div class=col-xs-4> <label for=input-@padding-xs-horizontal>@padding-xs-horizontal</label> <input class=form-control id=input-@padding-xs-horizontal value=5px data-var=@padding-xs-horizontal> </div> <div class=col-xs-4> <label for=input-@line-height-large>@line-height-large</label> <input class=form-control id=input-@line-height-large value=1.3333333 data-var=@line-height-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@line-height-small>@line-height-small</label> <input class=form-control id=input-@line-height-small value=1.5 data-var=@line-height-small> </div> <div class=col-xs-4> <label for=input-@border-radius-base>@border-radius-base</label> <input class=form-control id=input-@border-radius-base value=4px data-var=@border-radius-base> </div> <div class=col-xs-4> <label for=input-@border-radius-large>@border-radius-large</label> <input class=form-control id=input-@border-radius-large value=6px data-var=@border-radius-large> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@border-radius-small>@border-radius-small</label> <input class=form-control id=input-@border-radius-small value=3px data-var=@border-radius-small> </div> <div class=col-xs-4> <label for=input-@component-active-color>@component-active-color</label> <input class=form-control id=input-@component-active-color aria-describedby=help-block-@component-active-color value=#fff data-var=@component-active-color> <p class=help-block id=help-block-@component-active-color>Global color for active items (e.g., navs or dropdowns).</p> </div> <div class=col-xs-4> <label for=input-@component-active-bg>@component-active-bg</label> <input class=form-control id=input-@component-active-bg aria-describedby=help-block-@component-active-bg value=@brand-primary data-var=@component-active-bg> <p class=help-block id=help-block-@component-active-bg>Global background color for active items (e.g., navs or dropdowns).</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@caret-width-base>@caret-width-base</label> <input class=form-control id=input-@caret-width-base aria-describedby=help-block-@caret-width-base value=4px data-var=@caret-width-base> <p class=help-block id=help-block-@caret-width-base>Width of the <code>border</code> for generating carets that indicate dropdowns.</p> </div> <div class=col-xs-4> <label for=input-@caret-width-large>@caret-width-large</label> <input class=form-control id=input-@caret-width-large aria-describedby=help-block-@caret-width-large value=5px data-var=@caret-width-large> <p class=help-block id=help-block-@caret-width-large>Carets increase slightly in size for larger components.</p> </div> </div> <h2 id=tables>Tables</h2> <p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p> <div class=row> <div class=col-xs-4> <label for=input-@table-cell-padding>@table-cell-padding</label> <input class=form-control id=input-@table-cell-padding aria-describedby=help-block-@table-cell-padding value=8px data-var=@table-cell-padding> <p class=help-block id=help-block-@table-cell-padding>Padding for <code><th></code>s and <code><td></code>s.</p> </div> <div class=col-xs-4> <label for=input-@table-condensed-cell-padding>@table-condensed-cell-padding</label> <input class=form-control id=input-@table-condensed-cell-padding aria-describedby=help-block-@table-condensed-cell-padding value=5px data-var=@table-condensed-cell-padding> <p class=help-block id=help-block-@table-condensed-cell-padding>Padding for cells in <code>.table-condensed</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg>@table-bg</label> <input class=form-control id=input-@table-bg aria-describedby=help-block-@table-bg value=transparent data-var=@table-bg> <p class=help-block id=help-block-@table-bg>Default background color used for all tables.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@table-bg-accent>@table-bg-accent</label> <input class=form-control id=input-@table-bg-accent aria-describedby=help-block-@table-bg-accent value=#f9f9f9 data-var=@table-bg-accent> <p class=help-block id=help-block-@table-bg-accent>Background color used for <code>.table-striped</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg-hover>@table-bg-hover</label> <input class=form-control id=input-@table-bg-hover aria-describedby=help-block-@table-bg-hover value=#f5f5f5 data-var=@table-bg-hover> <p class=help-block id=help-block-@table-bg-hover>Background color used for <code>.table-hover</code>.</p> </div> <div class=col-xs-4> <label for=input-@table-bg-active>@table-bg-active</label> <input class=form-control id=input-@table-bg-active value=@table-bg-hover data-var=@table-bg-active> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@table-border-color>@table-border-color</label> <input class=form-control id=input-@table-border-color aria-describedby=help-block-@table-border-color value=#ddd data-var=@table-border-color> <p class=help-block id=help-block-@table-border-color>Border color for table and cell borders.</p> </div> </div> <h2 id=buttons>Buttons</h2> <p>For each of Bootstrap's buttons, define text, background and border color.</p> <div class=row> <div class=col-xs-4> <label for=input-@btn-font-weight>@btn-font-weight</label> <input class=form-control id=input-@btn-font-weight value=normal data-var=@btn-font-weight> </div> <div class=col-xs-4> <label for=input-@btn-default-color>@btn-default-color</label> <input class=form-control id=input-@btn-default-color value=#333 data-var=@btn-default-color> </div> <div class=col-xs-4> <label for=input-@btn-default-bg>@btn-default-bg</label> <input class=form-control id=input-@btn-default-bg value=#fff data-var=@btn-default-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-default-border>@btn-default-border</label> <input class=form-control id=input-@btn-default-border value=#ccc data-var=@btn-default-border> </div> <div class=col-xs-4> <label for=input-@btn-primary-color>@btn-primary-color</label> <input class=form-control id=input-@btn-primary-color value=#fff data-var=@btn-primary-color> </div> <div class=col-xs-4> <label for=input-@btn-primary-bg>@btn-primary-bg</label> <input class=form-control id=input-@btn-primary-bg value=@brand-primary data-var=@btn-primary-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-primary-border>@btn-primary-border</label> <input class=form-control id=input-@btn-primary-border value="darken(@btn-primary-bg, 5%)" data-var=@btn-primary-border> </div> <div class=col-xs-4> <label for=input-@btn-success-color>@btn-success-color</label> <input class=form-control id=input-@btn-success-color value=#fff data-var=@btn-success-color> </div> <div class=col-xs-4> <label for=input-@btn-success-bg>@btn-success-bg</label> <input class=form-control id=input-@btn-success-bg value=@brand-success data-var=@btn-success-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-success-border>@btn-success-border</label> <input class=form-control id=input-@btn-success-border value="darken(@btn-success-bg, 5%)" data-var=@btn-success-border> </div> <div class=col-xs-4> <label for=input-@btn-info-color>@btn-info-color</label> <input class=form-control id=input-@btn-info-color value=#fff data-var=@btn-info-color> </div> <div class=col-xs-4> <label for=input-@btn-info-bg>@btn-info-bg</label> <input class=form-control id=input-@btn-info-bg value=@brand-info data-var=@btn-info-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-info-border>@btn-info-border</label> <input class=form-control id=input-@btn-info-border value="darken(@btn-info-bg, 5%)" data-var=@btn-info-border> </div> <div class=col-xs-4> <label for=input-@btn-warning-color>@btn-warning-color</label> <input class=form-control id=input-@btn-warning-color value=#fff data-var=@btn-warning-color> </div> <div class=col-xs-4> <label for=input-@btn-warning-bg>@btn-warning-bg</label> <input class=form-control id=input-@btn-warning-bg value=@brand-warning data-var=@btn-warning-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-warning-border>@btn-warning-border</label> <input class=form-control id=input-@btn-warning-border value="darken(@btn-warning-bg, 5%)" data-var=@btn-warning-border> </div> <div class=col-xs-4> <label for=input-@btn-danger-color>@btn-danger-color</label> <input class=form-control id=input-@btn-danger-color value=#fff data-var=@btn-danger-color> </div> <div class=col-xs-4> <label for=input-@btn-danger-bg>@btn-danger-bg</label> <input class=form-control id=input-@btn-danger-bg value=@brand-danger data-var=@btn-danger-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-danger-border>@btn-danger-border</label> <input class=form-control id=input-@btn-danger-border value="darken(@btn-danger-bg, 5%)" data-var=@btn-danger-border> </div> <div class=col-xs-4> <label for=input-@btn-link-disabled-color>@btn-link-disabled-color</label> <input class=form-control id=input-@btn-link-disabled-color value=@gray-light data-var=@btn-link-disabled-color> </div> <div class=col-xs-4> <label for=input-@btn-border-radius-base>@btn-border-radius-base</label> <input class=form-control id=input-@btn-border-radius-base value=@border-radius-base data-var=@btn-border-radius-base> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@btn-border-radius-large>@btn-border-radius-large</label> <input class=form-control id=input-@btn-border-radius-large value=@border-radius-large data-var=@btn-border-radius-large> </div> <div class=col-xs-4> <label for=input-@btn-border-radius-small>@btn-border-radius-small</label> <input class=form-control id=input-@btn-border-radius-small value=@border-radius-small data-var=@btn-border-radius-small> </div> </div> <h2 id=forms>Forms</h2> <div class=row> <div class=col-xs-4> <label for=input-@input-bg>@input-bg</label> <input class=form-control id=input-@input-bg aria-describedby=help-block-@input-bg value=#fff data-var=@input-bg> <p class=help-block id=help-block-@input-bg><code><input></code> background color</p> </div> <div class=col-xs-4> <label for=input-@input-bg-disabled>@input-bg-disabled</label> <input class=form-control id=input-@input-bg-disabled aria-describedby=help-block-@input-bg-disabled value=@gray-lighter data-var=@input-bg-disabled> <p class=help-block id=help-block-@input-bg-disabled><code><input disabled></code> background color</p> </div> <div class=col-xs-4> <label for=input-@input-color>@input-color</label> <input class=form-control id=input-@input-color aria-describedby=help-block-@input-color value=@gray data-var=@input-color> <p class=help-block id=help-block-@input-color>Text color for <code><input></code>s</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-border>@input-border</label> <input class=form-control id=input-@input-border aria-describedby=help-block-@input-border value=#ccc data-var=@input-border> <p class=help-block id=help-block-@input-border><code><input></code> border color</p> </div> <div class=col-xs-4> <label for=input-@input-border-radius>@input-border-radius</label> <input class=form-control id=input-@input-border-radius aria-describedby=help-block-@input-border-radius value=@border-radius-base data-var=@input-border-radius> <p class=help-block id=help-block-@input-border-radius>Default <code>.form-control</code> border radius</p> </div> <div class=col-xs-4> <label for=input-@input-border-radius-large>@input-border-radius-large</label> <input class=form-control id=input-@input-border-radius-large aria-describedby=help-block-@input-border-radius-large value=@border-radius-large data-var=@input-border-radius-large> <p class=help-block id=help-block-@input-border-radius-large>Large <code>.form-control</code> border radius</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-border-radius-small>@input-border-radius-small</label> <input class=form-control id=input-@input-border-radius-small aria-describedby=help-block-@input-border-radius-small value=@border-radius-small data-var=@input-border-radius-small> <p class=help-block id=help-block-@input-border-radius-small>Small <code>.form-control</code> border radius</p> </div> <div class=col-xs-4> <label for=input-@input-border-focus>@input-border-focus</label> <input class=form-control id=input-@input-border-focus aria-describedby=help-block-@input-border-focus value=#66afe9 data-var=@input-border-focus> <p class=help-block id=help-block-@input-border-focus>Border color for inputs on focus</p> </div> <div class=col-xs-4> <label for=input-@input-color-placeholder>@input-color-placeholder</label> <input class=form-control id=input-@input-color-placeholder aria-describedby=help-block-@input-color-placeholder value=#999 data-var=@input-color-placeholder> <p class=help-block id=help-block-@input-color-placeholder>Placeholder text color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-height-base>@input-height-base</label> <input class=form-control id=input-@input-height-base aria-describedby=help-block-@input-height-base value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var=@input-height-base> <p class=help-block id=help-block-@input-height-base>Default <code>.form-control</code> height</p> </div> <div class=col-xs-4> <label for=input-@input-height-large>@input-height-large</label> <input class=form-control id=input-@input-height-large aria-describedby=help-block-@input-height-large value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var=@input-height-large> <p class=help-block id=help-block-@input-height-large>Large <code>.form-control</code> height</p> </div> <div class=col-xs-4> <label for=input-@input-height-small>@input-height-small</label> <input class=form-control id=input-@input-height-small aria-describedby=help-block-@input-height-small value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var=@input-height-small> <p class=help-block id=help-block-@input-height-small>Small <code>.form-control</code> height</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@form-group-margin-bottom>@form-group-margin-bottom</label> <input class=form-control id=input-@form-group-margin-bottom aria-describedby=help-block-@form-group-margin-bottom value=15px data-var=@form-group-margin-bottom> <p class=help-block id=help-block-@form-group-margin-bottom><code>.form-group</code> margin</p> </div> <div class=col-xs-4> <label for=input-@legend-color>@legend-color</label> <input class=form-control id=input-@legend-color value=@gray-dark data-var=@legend-color> </div> <div class=col-xs-4> <label for=input-@legend-border-color>@legend-border-color</label> <input class=form-control id=input-@legend-border-color value=#e5e5e5 data-var=@legend-border-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@input-group-addon-bg>@input-group-addon-bg</label> <input class=form-control id=input-@input-group-addon-bg aria-describedby=help-block-@input-group-addon-bg value=@gray-lighter data-var=@input-group-addon-bg> <p class=help-block id=help-block-@input-group-addon-bg>Background color for textual input addons</p> </div> <div class=col-xs-4> <label for=input-@input-group-addon-border-color>@input-group-addon-border-color</label> <input class=form-control id=input-@input-group-addon-border-color aria-describedby=help-block-@input-group-addon-border-color value=@input-border data-var=@input-group-addon-border-color> <p class=help-block id=help-block-@input-group-addon-border-color>Border color for textual input addons</p> </div> <div class=col-xs-4> <label for=input-@cursor-disabled>@cursor-disabled</label> <input class=form-control id=input-@cursor-disabled aria-describedby=help-block-@cursor-disabled value=not-allowed data-var=@cursor-disabled> <p class=help-block id=help-block-@cursor-disabled>Disabled cursor for form controls and buttons.</p> </div> </div> <h2 id=dropdowns>Dropdowns</h2> <p>Dropdown menu container and contents.</p> <div class=row> <div class=col-xs-4> <label for=input-@dropdown-bg>@dropdown-bg</label> <input class=form-control id=input-@dropdown-bg aria-describedby=help-block-@dropdown-bg value=#fff data-var=@dropdown-bg> <p class=help-block id=help-block-@dropdown-bg>Background for the dropdown menu.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-border>@dropdown-border</label> <input class=form-control id=input-@dropdown-border aria-describedby=help-block-@dropdown-border value=rgba(0,0,0,.15) data-var=@dropdown-border> <p class=help-block id=help-block-@dropdown-border>Dropdown menu <code>border-color</code>.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-fallback-border>@dropdown-fallback-border</label> <input class=form-control id=input-@dropdown-fallback-border aria-describedby=help-block-@dropdown-fallback-border value=#ccc data-var=@dropdown-fallback-border> <p class=help-block id=help-block-@dropdown-fallback-border>Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-divider-bg>@dropdown-divider-bg</label> <input class=form-control id=input-@dropdown-divider-bg aria-describedby=help-block-@dropdown-divider-bg value=#e5e5e5 data-var=@dropdown-divider-bg> <p class=help-block id=help-block-@dropdown-divider-bg>Divider color for between dropdown items.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-color>@dropdown-link-color</label> <input class=form-control id=input-@dropdown-link-color aria-describedby=help-block-@dropdown-link-color value=@gray-dark data-var=@dropdown-link-color> <p class=help-block id=help-block-@dropdown-link-color>Dropdown link text color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-hover-color>@dropdown-link-hover-color</label> <input class=form-control id=input-@dropdown-link-hover-color aria-describedby=help-block-@dropdown-link-hover-color value="darken(@gray-dark, 5%)" data-var=@dropdown-link-hover-color> <p class=help-block id=help-block-@dropdown-link-hover-color>Hover color for dropdown links.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-link-hover-bg>@dropdown-link-hover-bg</label> <input class=form-control id=input-@dropdown-link-hover-bg aria-describedby=help-block-@dropdown-link-hover-bg value=#f5f5f5 data-var=@dropdown-link-hover-bg> <p class=help-block id=help-block-@dropdown-link-hover-bg>Hover background for dropdown links.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-active-color>@dropdown-link-active-color</label> <input class=form-control id=input-@dropdown-link-active-color aria-describedby=help-block-@dropdown-link-active-color value=@component-active-color data-var=@dropdown-link-active-color> <p class=help-block id=help-block-@dropdown-link-active-color>Active dropdown menu item text color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-link-active-bg>@dropdown-link-active-bg</label> <input class=form-control id=input-@dropdown-link-active-bg aria-describedby=help-block-@dropdown-link-active-bg value=@component-active-bg data-var=@dropdown-link-active-bg> <p class=help-block id=help-block-@dropdown-link-active-bg>Active dropdown menu item background color.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dropdown-link-disabled-color>@dropdown-link-disabled-color</label> <input class=form-control id=input-@dropdown-link-disabled-color aria-describedby=help-block-@dropdown-link-disabled-color value=@gray-light data-var=@dropdown-link-disabled-color> <p class=help-block id=help-block-@dropdown-link-disabled-color>Disabled dropdown menu item background color.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-header-color>@dropdown-header-color</label> <input class=form-control id=input-@dropdown-header-color aria-describedby=help-block-@dropdown-header-color value=@gray-light data-var=@dropdown-header-color> <p class=help-block id=help-block-@dropdown-header-color>Text color for headers within dropdown menus.</p> </div> <div class=col-xs-4> <label for=input-@dropdown-caret-color>@dropdown-caret-color</label> <input class=form-control id=input-@dropdown-caret-color aria-describedby=help-block-@dropdown-caret-color value=#000 data-var=@dropdown-caret-color> <p class=help-block id=help-block-@dropdown-caret-color>Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> </div> </div> <h2 id=media-queries-breakpoints>Media queries breakpoints</h2> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <div class=row> <div class=col-xs-4> <label for=input-@screen-xs>@screen-xs</label> <input class=form-control id=input-@screen-xs aria-describedby=help-block-@screen-xs value=480px data-var=@screen-xs> <p class=help-block id=help-block-@screen-xs>Deprecated <code>@screen-xs</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-xs-min>@screen-xs-min</label> <input class=form-control id=input-@screen-xs-min aria-describedby=help-block-@screen-xs-min value=@screen-xs data-var=@screen-xs-min> <p class=help-block id=help-block-@screen-xs-min>Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> </div> <div class=col-xs-4> <label for=input-@screen-phone>@screen-phone</label> <input class=form-control id=input-@screen-phone aria-describedby=help-block-@screen-phone value=@screen-xs-min data-var=@screen-phone> <p class=help-block id=help-block-@screen-phone>Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-sm>@screen-sm</label> <input class=form-control id=input-@screen-sm aria-describedby=help-block-@screen-sm value=768px data-var=@screen-sm> <p class=help-block id=help-block-@screen-sm>Deprecated <code>@screen-sm</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-sm-min>@screen-sm-min</label> <input class=form-control id=input-@screen-sm-min value=@screen-sm data-var=@screen-sm-min> </div> <div class=col-xs-4> <label for=input-@screen-tablet>@screen-tablet</label> <input class=form-control id=input-@screen-tablet aria-describedby=help-block-@screen-tablet value=@screen-sm-min data-var=@screen-tablet> <p class=help-block id=help-block-@screen-tablet>Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-md>@screen-md</label> <input class=form-control id=input-@screen-md aria-describedby=help-block-@screen-md value=992px data-var=@screen-md> <p class=help-block id=help-block-@screen-md>Deprecated <code>@screen-md</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-md-min>@screen-md-min</label> <input class=form-control id=input-@screen-md-min value=@screen-md data-var=@screen-md-min> </div> <div class=col-xs-4> <label for=input-@screen-desktop>@screen-desktop</label> <input class=form-control id=input-@screen-desktop aria-describedby=help-block-@screen-desktop value=@screen-md-min data-var=@screen-desktop> <p class=help-block id=help-block-@screen-desktop>Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-lg>@screen-lg</label> <input class=form-control id=input-@screen-lg aria-describedby=help-block-@screen-lg value=1200px data-var=@screen-lg> <p class=help-block id=help-block-@screen-lg>Deprecated <code>@screen-lg</code> as of v3.0.1</p> </div> <div class=col-xs-4> <label for=input-@screen-lg-min>@screen-lg-min</label> <input class=form-control id=input-@screen-lg-min value=@screen-lg data-var=@screen-lg-min> </div> <div class=col-xs-4> <label for=input-@screen-lg-desktop>@screen-lg-desktop</label> <input class=form-control id=input-@screen-lg-desktop aria-describedby=help-block-@screen-lg-desktop value=@screen-lg-min data-var=@screen-lg-desktop> <p class=help-block id=help-block-@screen-lg-desktop>Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@screen-xs-max>@screen-xs-max</label> <input class=form-control id=input-@screen-xs-max value="(@screen-sm-min - 1)" data-var=@screen-xs-max> </div> <div class=col-xs-4> <label for=input-@screen-sm-max>@screen-sm-max</label> <input class=form-control id=input-@screen-sm-max value="(@screen-md-min - 1)" data-var=@screen-sm-max> </div> <div class=col-xs-4> <label for=input-@screen-md-max>@screen-md-max</label> <input class=form-control id=input-@screen-md-max value="(@screen-lg-min - 1)" data-var=@screen-md-max> </div> </div> <h2 id=grid-system>Grid system</h2> <p>Define your custom responsive grid.</p> <div class=row> <div class=col-xs-4> <label for=input-@grid-columns>@grid-columns</label> <input class=form-control id=input-@grid-columns aria-describedby=help-block-@grid-columns value=12 data-var=@grid-columns> <p class=help-block id=help-block-@grid-columns>Number of columns in the grid.</p> </div> <div class=col-xs-4> <label for=input-@grid-gutter-width>@grid-gutter-width</label> <input class=form-control id=input-@grid-gutter-width aria-describedby=help-block-@grid-gutter-width value=30px data-var=@grid-gutter-width> <p class=help-block id=help-block-@grid-gutter-width>Padding between columns. Gets divided in half for the left and right.</p> </div> <div class=col-xs-4> <label for=input-@grid-float-breakpoint>@grid-float-breakpoint</label> <input class=form-control id=input-@grid-float-breakpoint aria-describedby=help-block-@grid-float-breakpoint value=@screen-sm-min data-var=@grid-float-breakpoint> <p class=help-block id=help-block-@grid-float-breakpoint>Point at which the navbar becomes uncollapsed.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@grid-float-breakpoint-max>@grid-float-breakpoint-max</label> <input class=form-control id=input-@grid-float-breakpoint-max aria-describedby=help-block-@grid-float-breakpoint-max value="(@grid-float-breakpoint - 1)" data-var=@grid-float-breakpoint-max> <p class=help-block id=help-block-@grid-float-breakpoint-max>Point at which the navbar begins collapsing.</p> </div> </div> <h2 id=container-sizes>Container sizes</h2> <p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <div class=row> <div class=col-xs-4> <label for=input-@container-tablet>@container-tablet</label> <input class=form-control id=input-@container-tablet value="(720px + @grid-gutter-width)" data-var=@container-tablet> </div> <div class=col-xs-4> <label for=input-@container-sm>@container-sm</label> <input class=form-control id=input-@container-sm aria-describedby=help-block-@container-sm value=@container-tablet data-var=@container-sm> <p class=help-block id=help-block-@container-sm>For <code>@screen-sm-min</code> and up.</p> </div> <div class=col-xs-4> <label for=input-@container-desktop>@container-desktop</label> <input class=form-control id=input-@container-desktop value="(940px + @grid-gutter-width)" data-var=@container-desktop> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@container-md>@container-md</label> <input class=form-control id=input-@container-md aria-describedby=help-block-@container-md value=@container-desktop data-var=@container-md> <p class=help-block id=help-block-@container-md>For <code>@screen-md-min</code> and up.</p> </div> <div class=col-xs-4> <label for=input-@container-large-desktop>@container-large-desktop</label> <input class=form-control id=input-@container-large-desktop value="(1140px + @grid-gutter-width)" data-var=@container-large-desktop> </div> <div class=col-xs-4> <label for=input-@container-lg>@container-lg</label> <input class=form-control id=input-@container-lg aria-describedby=help-block-@container-lg value=@container-large-desktop data-var=@container-lg> <p class=help-block id=help-block-@container-lg>For <code>@screen-lg-min</code> and up.</p> </div> </div> <h2 id=navbar>Navbar</h2> <div class=row> <div class=col-xs-4> <label for=input-@navbar-height>@navbar-height</label> <input class=form-control id=input-@navbar-height value=50px data-var=@navbar-height> </div> <div class=col-xs-4> <label for=input-@navbar-margin-bottom>@navbar-margin-bottom</label> <input class=form-control id=input-@navbar-margin-bottom value=@line-height-computed data-var=@navbar-margin-bottom> </div> <div class=col-xs-4> <label for=input-@navbar-border-radius>@navbar-border-radius</label> <input class=form-control id=input-@navbar-border-radius value=@border-radius-base data-var=@navbar-border-radius> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-padding-horizontal>@navbar-padding-horizontal</label> <input class=form-control id=input-@navbar-padding-horizontal value="floor((@grid-gutter-width / 2))" data-var=@navbar-padding-horizontal> </div> <div class=col-xs-4> <label for=input-@navbar-padding-vertical>@navbar-padding-vertical</label> <input class=form-control id=input-@navbar-padding-vertical value="((@navbar-height - @line-height-computed) / 2)" data-var=@navbar-padding-vertical> </div> <div class=col-xs-4> <label for=input-@navbar-collapse-max-height>@navbar-collapse-max-height</label> <input class=form-control id=input-@navbar-collapse-max-height value=340px data-var=@navbar-collapse-max-height> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-color>@navbar-default-color</label> <input class=form-control id=input-@navbar-default-color value=#777 data-var=@navbar-default-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-bg>@navbar-default-bg</label> <input class=form-control id=input-@navbar-default-bg value=#f8f8f8 data-var=@navbar-default-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-border>@navbar-default-border</label> <input class=form-control id=input-@navbar-default-border value="darken(@navbar-default-bg, 6.5%)" data-var=@navbar-default-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-color>@navbar-default-link-color</label> <input class=form-control id=input-@navbar-default-link-color value=#777 data-var=@navbar-default-link-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-hover-color>@navbar-default-link-hover-color</label> <input class=form-control id=input-@navbar-default-link-hover-color value=#333 data-var=@navbar-default-link-hover-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-hover-bg>@navbar-default-link-hover-bg</label> <input class=form-control id=input-@navbar-default-link-hover-bg value=transparent data-var=@navbar-default-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-active-color>@navbar-default-link-active-color</label> <input class=form-control id=input-@navbar-default-link-active-color value=#555 data-var=@navbar-default-link-active-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-active-bg>@navbar-default-link-active-bg</label> <input class=form-control id=input-@navbar-default-link-active-bg value="darken(@navbar-default-bg, 6.5%)" data-var=@navbar-default-link-active-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-link-disabled-color>@navbar-default-link-disabled-color</label> <input class=form-control id=input-@navbar-default-link-disabled-color value=#ccc data-var=@navbar-default-link-disabled-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-link-disabled-bg>@navbar-default-link-disabled-bg</label> <input class=form-control id=input-@navbar-default-link-disabled-bg value=transparent data-var=@navbar-default-link-disabled-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-brand-color>@navbar-default-brand-color</label> <input class=form-control id=input-@navbar-default-brand-color value=@navbar-default-link-color data-var=@navbar-default-brand-color> </div> <div class=col-xs-4> <label for=input-@navbar-default-brand-hover-color>@navbar-default-brand-hover-color</label> <input class=form-control id=input-@navbar-default-brand-hover-color value="darken(@navbar-default-brand-color, 10%)" data-var=@navbar-default-brand-hover-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-brand-hover-bg>@navbar-default-brand-hover-bg</label> <input class=form-control id=input-@navbar-default-brand-hover-bg value=transparent data-var=@navbar-default-brand-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-hover-bg>@navbar-default-toggle-hover-bg</label> <input class=form-control id=input-@navbar-default-toggle-hover-bg value=#ddd data-var=@navbar-default-toggle-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-icon-bar-bg>@navbar-default-toggle-icon-bar-bg</label> <input class=form-control id=input-@navbar-default-toggle-icon-bar-bg value=#888 data-var=@navbar-default-toggle-icon-bar-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-default-toggle-border-color>@navbar-default-toggle-border-color</label> <input class=form-control id=input-@navbar-default-toggle-border-color value=#ddd data-var=@navbar-default-toggle-border-color> </div> </div> <h3 id=inverted-navbar>Inverted navbar</h3> <div class=row> <div class=col-xs-4> <label for=input-@navbar-inverse-color>@navbar-inverse-color</label> <input class=form-control id=input-@navbar-inverse-color value="lighten(@gray-light, 15%)" data-var=@navbar-inverse-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-bg>@navbar-inverse-bg</label> <input class=form-control id=input-@navbar-inverse-bg value=#222 data-var=@navbar-inverse-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-border>@navbar-inverse-border</label> <input class=form-control id=input-@navbar-inverse-border value="darken(@navbar-inverse-bg, 10%)" data-var=@navbar-inverse-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-color>@navbar-inverse-link-color</label> <input class=form-control id=input-@navbar-inverse-link-color value="lighten(@gray-light, 15%)" data-var=@navbar-inverse-link-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-hover-color>@navbar-inverse-link-hover-color</label> <input class=form-control id=input-@navbar-inverse-link-hover-color value=#fff data-var=@navbar-inverse-link-hover-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-hover-bg>@navbar-inverse-link-hover-bg</label> <input class=form-control id=input-@navbar-inverse-link-hover-bg value=transparent data-var=@navbar-inverse-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-active-color>@navbar-inverse-link-active-color</label> <input class=form-control id=input-@navbar-inverse-link-active-color value=@navbar-inverse-link-hover-color data-var=@navbar-inverse-link-active-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-active-bg>@navbar-inverse-link-active-bg</label> <input class=form-control id=input-@navbar-inverse-link-active-bg value="darken(@navbar-inverse-bg, 10%)" data-var=@navbar-inverse-link-active-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-disabled-color>@navbar-inverse-link-disabled-color</label> <input class=form-control id=input-@navbar-inverse-link-disabled-color value=#444 data-var=@navbar-inverse-link-disabled-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-link-disabled-bg>@navbar-inverse-link-disabled-bg</label> <input class=form-control id=input-@navbar-inverse-link-disabled-bg value=transparent data-var=@navbar-inverse-link-disabled-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-color>@navbar-inverse-brand-color</label> <input class=form-control id=input-@navbar-inverse-brand-color value=@navbar-inverse-link-color data-var=@navbar-inverse-brand-color> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-hover-color>@navbar-inverse-brand-hover-color</label> <input class=form-control id=input-@navbar-inverse-brand-hover-color value=#fff data-var=@navbar-inverse-brand-hover-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-brand-hover-bg>@navbar-inverse-brand-hover-bg</label> <input class=form-control id=input-@navbar-inverse-brand-hover-bg value=transparent data-var=@navbar-inverse-brand-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-hover-bg>@navbar-inverse-toggle-hover-bg</label> <input class=form-control id=input-@navbar-inverse-toggle-hover-bg value=#333 data-var=@navbar-inverse-toggle-hover-bg> </div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-icon-bar-bg>@navbar-inverse-toggle-icon-bar-bg</label> <input class=form-control id=input-@navbar-inverse-toggle-icon-bar-bg value=#fff data-var=@navbar-inverse-toggle-icon-bar-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@navbar-inverse-toggle-border-color>@navbar-inverse-toggle-border-color</label> <input class=form-control id=input-@navbar-inverse-toggle-border-color value=#333 data-var=@navbar-inverse-toggle-border-color> </div> </div> <h2 id=navs>Navs</h2> <h3 id=shared-nav-styles>Shared nav styles</h3> <div class=row> <div class=col-xs-4> <label for=input-@nav-link-padding>@nav-link-padding</label> <input class=form-control id=input-@nav-link-padding value="10px 15px" data-var=@nav-link-padding> </div> <div class=col-xs-4> <label for=input-@nav-link-hover-bg>@nav-link-hover-bg</label> <input class=form-control id=input-@nav-link-hover-bg value=@gray-lighter data-var=@nav-link-hover-bg> </div> <div class=col-xs-4> <label for=input-@nav-disabled-link-color>@nav-disabled-link-color</label> <input class=form-control id=input-@nav-disabled-link-color value=@gray-light data-var=@nav-disabled-link-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-disabled-link-hover-color>@nav-disabled-link-hover-color</label> <input class=form-control id=input-@nav-disabled-link-hover-color value=@gray-light data-var=@nav-disabled-link-hover-color> </div> </div> <h2 id=tabs>Tabs</h2> <div class=row> <div class=col-xs-4> <label for=input-@nav-tabs-border-color>@nav-tabs-border-color</label> <input class=form-control id=input-@nav-tabs-border-color value=#ddd data-var=@nav-tabs-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-link-hover-border-color>@nav-tabs-link-hover-border-color</label> <input class=form-control id=input-@nav-tabs-link-hover-border-color value=@gray-lighter data-var=@nav-tabs-link-hover-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-bg>@nav-tabs-active-link-hover-bg</label> <input class=form-control id=input-@nav-tabs-active-link-hover-bg value=@body-bg data-var=@nav-tabs-active-link-hover-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-color>@nav-tabs-active-link-hover-color</label> <input class=form-control id=input-@nav-tabs-active-link-hover-color value=@gray data-var=@nav-tabs-active-link-hover-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-active-link-hover-border-color>@nav-tabs-active-link-hover-border-color</label> <input class=form-control id=input-@nav-tabs-active-link-hover-border-color value=#ddd data-var=@nav-tabs-active-link-hover-border-color> </div> <div class=col-xs-4> <label for=input-@nav-tabs-justified-link-border-color>@nav-tabs-justified-link-border-color</label> <input class=form-control id=input-@nav-tabs-justified-link-border-color value=#ddd data-var=@nav-tabs-justified-link-border-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@nav-tabs-justified-active-link-border-color>@nav-tabs-justified-active-link-border-color</label> <input class=form-control id=input-@nav-tabs-justified-active-link-border-color value=@body-bg data-var=@nav-tabs-justified-active-link-border-color> </div> </div> <h2 id=pills>Pills</h2> <div class=row> <div class=col-xs-4> <label for=input-@nav-pills-border-radius>@nav-pills-border-radius</label> <input class=form-control id=input-@nav-pills-border-radius value=@border-radius-base data-var=@nav-pills-border-radius> </div> <div class=col-xs-4> <label for=input-@nav-pills-active-link-hover-bg>@nav-pills-active-link-hover-bg</label> <input class=form-control id=input-@nav-pills-active-link-hover-bg value=@component-active-bg data-var=@nav-pills-active-link-hover-bg> </div> <div class=col-xs-4> <label for=input-@nav-pills-active-link-hover-color>@nav-pills-active-link-hover-color</label> <input class=form-control id=input-@nav-pills-active-link-hover-color value=@component-active-color data-var=@nav-pills-active-link-hover-color> </div> </div> <h2 id=pagination>Pagination</h2> <div class=row> <div class=col-xs-4> <label for=input-@pagination-color>@pagination-color</label> <input class=form-control id=input-@pagination-color value=@link-color data-var=@pagination-color> </div> <div class=col-xs-4> <label for=input-@pagination-bg>@pagination-bg</label> <input class=form-control id=input-@pagination-bg value=#fff data-var=@pagination-bg> </div> <div class=col-xs-4> <label for=input-@pagination-border>@pagination-border</label> <input class=form-control id=input-@pagination-border value=#ddd data-var=@pagination-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-hover-color>@pagination-hover-color</label> <input class=form-control id=input-@pagination-hover-color value=@link-hover-color data-var=@pagination-hover-color> </div> <div class=col-xs-4> <label for=input-@pagination-hover-bg>@pagination-hover-bg</label> <input class=form-control id=input-@pagination-hover-bg value=@gray-lighter data-var=@pagination-hover-bg> </div> <div class=col-xs-4> <label for=input-@pagination-hover-border>@pagination-hover-border</label> <input class=form-control id=input-@pagination-hover-border value=#ddd data-var=@pagination-hover-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-active-color>@pagination-active-color</label> <input class=form-control id=input-@pagination-active-color value=#fff data-var=@pagination-active-color> </div> <div class=col-xs-4> <label for=input-@pagination-active-bg>@pagination-active-bg</label> <input class=form-control id=input-@pagination-active-bg value=@brand-primary data-var=@pagination-active-bg> </div> <div class=col-xs-4> <label for=input-@pagination-active-border>@pagination-active-border</label> <input class=form-control id=input-@pagination-active-border value=@brand-primary data-var=@pagination-active-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pagination-disabled-color>@pagination-disabled-color</label> <input class=form-control id=input-@pagination-disabled-color value=@gray-light data-var=@pagination-disabled-color> </div> <div class=col-xs-4> <label for=input-@pagination-disabled-bg>@pagination-disabled-bg</label> <input class=form-control id=input-@pagination-disabled-bg value=#fff data-var=@pagination-disabled-bg> </div> <div class=col-xs-4> <label for=input-@pagination-disabled-border>@pagination-disabled-border</label> <input class=form-control id=input-@pagination-disabled-border value=#ddd data-var=@pagination-disabled-border> </div> </div> <h2 id=pager>Pager</h2> <div class=row> <div class=col-xs-4> <label for=input-@pager-bg>@pager-bg</label> <input class=form-control id=input-@pager-bg value=@pagination-bg data-var=@pager-bg> </div> <div class=col-xs-4> <label for=input-@pager-border>@pager-border</label> <input class=form-control id=input-@pager-border value=@pagination-border data-var=@pager-border> </div> <div class=col-xs-4> <label for=input-@pager-border-radius>@pager-border-radius</label> <input class=form-control id=input-@pager-border-radius value=15px data-var=@pager-border-radius> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pager-hover-bg>@pager-hover-bg</label> <input class=form-control id=input-@pager-hover-bg value=@pagination-hover-bg data-var=@pager-hover-bg> </div> <div class=col-xs-4> <label for=input-@pager-active-bg>@pager-active-bg</label> <input class=form-control id=input-@pager-active-bg value=@pagination-active-bg data-var=@pager-active-bg> </div> <div class=col-xs-4> <label for=input-@pager-active-color>@pager-active-color</label> <input class=form-control id=input-@pager-active-color value=@pagination-active-color data-var=@pager-active-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pager-disabled-color>@pager-disabled-color</label> <input class=form-control id=input-@pager-disabled-color value=@pagination-disabled-color data-var=@pager-disabled-color> </div> </div> <h2 id=jumbotron>Jumbotron</h2> <div class=row> <div class=col-xs-4> <label for=input-@jumbotron-padding>@jumbotron-padding</label> <input class=form-control id=input-@jumbotron-padding value=30px data-var=@jumbotron-padding> </div> <div class=col-xs-4> <label for=input-@jumbotron-color>@jumbotron-color</label> <input class=form-control id=input-@jumbotron-color value=inherit data-var=@jumbotron-color> </div> <div class=col-xs-4> <label for=input-@jumbotron-bg>@jumbotron-bg</label> <input class=form-control id=input-@jumbotron-bg value=@gray-lighter data-var=@jumbotron-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@jumbotron-heading-color>@jumbotron-heading-color</label> <input class=form-control id=input-@jumbotron-heading-color value=inherit data-var=@jumbotron-heading-color> </div> <div class=col-xs-4> <label for=input-@jumbotron-font-size>@jumbotron-font-size</label> <input class=form-control id=input-@jumbotron-font-size value="ceil((@font-size-base * 1.5))" data-var=@jumbotron-font-size> </div> <div class=col-xs-4> <label for=input-@jumbotron-heading-font-size>@jumbotron-heading-font-size</label> <input class=form-control id=input-@jumbotron-heading-font-size value="ceil((@font-size-base * 4.5))" data-var=@jumbotron-heading-font-size> </div> </div> <h2 id=form-states-and-alerts>Form states and alerts</h2> <p>Define colors for form feedback states and, by default, alerts.</p> <div class=row> <div class=col-xs-4> <label for=input-@state-success-text>@state-success-text</label> <input class=form-control id=input-@state-success-text value=#3c763d data-var=@state-success-text> </div> <div class=col-xs-4> <label for=input-@state-success-bg>@state-success-bg</label> <input class=form-control id=input-@state-success-bg value=#dff0d8 data-var=@state-success-bg> </div> <div class=col-xs-4> <label for=input-@state-success-border>@state-success-border</label> <input class=form-control id=input-@state-success-border value="darken(spin(@state-success-bg, -10), 5%)" data-var=@state-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-info-text>@state-info-text</label> <input class=form-control id=input-@state-info-text value=#31708f data-var=@state-info-text> </div> <div class=col-xs-4> <label for=input-@state-info-bg>@state-info-bg</label> <input class=form-control id=input-@state-info-bg value=#d9edf7 data-var=@state-info-bg> </div> <div class=col-xs-4> <label for=input-@state-info-border>@state-info-border</label> <input class=form-control id=input-@state-info-border value="darken(spin(@state-info-bg, -10), 7%)" data-var=@state-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-warning-text>@state-warning-text</label> <input class=form-control id=input-@state-warning-text value=#8a6d3b data-var=@state-warning-text> </div> <div class=col-xs-4> <label for=input-@state-warning-bg>@state-warning-bg</label> <input class=form-control id=input-@state-warning-bg value=#fcf8e3 data-var=@state-warning-bg> </div> <div class=col-xs-4> <label for=input-@state-warning-border>@state-warning-border</label> <input class=form-control id=input-@state-warning-border value="darken(spin(@state-warning-bg, -10), 5%)" data-var=@state-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@state-danger-text>@state-danger-text</label> <input class=form-control id=input-@state-danger-text value=#a94442 data-var=@state-danger-text> </div> <div class=col-xs-4> <label for=input-@state-danger-bg>@state-danger-bg</label> <input class=form-control id=input-@state-danger-bg value=#f2dede data-var=@state-danger-bg> </div> <div class=col-xs-4> <label for=input-@state-danger-border>@state-danger-border</label> <input class=form-control id=input-@state-danger-border value="darken(spin(@state-danger-bg, -10), 5%)" data-var=@state-danger-border> </div> </div> <h2 id=tooltips>Tooltips</h2> <div class=row> <div class=col-xs-4> <label for=input-@tooltip-max-width>@tooltip-max-width</label> <input class=form-control id=input-@tooltip-max-width aria-describedby=help-block-@tooltip-max-width value=200px data-var=@tooltip-max-width> <p class=help-block id=help-block-@tooltip-max-width>Tooltip max width</p> </div> <div class=col-xs-4> <label for=input-@tooltip-color>@tooltip-color</label> <input class=form-control id=input-@tooltip-color aria-describedby=help-block-@tooltip-color value=#fff data-var=@tooltip-color> <p class=help-block id=help-block-@tooltip-color>Tooltip text color</p> </div> <div class=col-xs-4> <label for=input-@tooltip-bg>@tooltip-bg</label> <input class=form-control id=input-@tooltip-bg aria-describedby=help-block-@tooltip-bg value=#000 data-var=@tooltip-bg> <p class=help-block id=help-block-@tooltip-bg>Tooltip background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@tooltip-opacity>@tooltip-opacity</label> <input class=form-control id=input-@tooltip-opacity value=.9 data-var=@tooltip-opacity> </div> <div class=col-xs-4> <label for=input-@tooltip-arrow-width>@tooltip-arrow-width</label> <input class=form-control id=input-@tooltip-arrow-width aria-describedby=help-block-@tooltip-arrow-width value=5px data-var=@tooltip-arrow-width> <p class=help-block id=help-block-@tooltip-arrow-width>Tooltip arrow width</p> </div> <div class=col-xs-4> <label for=input-@tooltip-arrow-color>@tooltip-arrow-color</label> <input class=form-control id=input-@tooltip-arrow-color aria-describedby=help-block-@tooltip-arrow-color value=@tooltip-bg data-var=@tooltip-arrow-color> <p class=help-block id=help-block-@tooltip-arrow-color>Tooltip arrow color</p> </div> </div> <h2 id=popovers>Popovers</h2> <div class=row> <div class=col-xs-4> <label for=input-@popover-bg>@popover-bg</label> <input class=form-control id=input-@popover-bg aria-describedby=help-block-@popover-bg value=#fff data-var=@popover-bg> <p class=help-block id=help-block-@popover-bg>Popover body background color</p> </div> <div class=col-xs-4> <label for=input-@popover-max-width>@popover-max-width</label> <input class=form-control id=input-@popover-max-width aria-describedby=help-block-@popover-max-width value=276px data-var=@popover-max-width> <p class=help-block id=help-block-@popover-max-width>Popover maximum width</p> </div> <div class=col-xs-4> <label for=input-@popover-border-color>@popover-border-color</label> <input class=form-control id=input-@popover-border-color aria-describedby=help-block-@popover-border-color value=rgba(0,0,0,.2) data-var=@popover-border-color> <p class=help-block id=help-block-@popover-border-color>Popover border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-fallback-border-color>@popover-fallback-border-color</label> <input class=form-control id=input-@popover-fallback-border-color aria-describedby=help-block-@popover-fallback-border-color value=#ccc data-var=@popover-fallback-border-color> <p class=help-block id=help-block-@popover-fallback-border-color>Popover fallback border color</p> </div> <div class=col-xs-4> <label for=input-@popover-title-bg>@popover-title-bg</label> <input class=form-control id=input-@popover-title-bg aria-describedby=help-block-@popover-title-bg value="darken(@popover-bg, 3%)" data-var=@popover-title-bg> <p class=help-block id=help-block-@popover-title-bg>Popover title background color</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-width>@popover-arrow-width</label> <input class=form-control id=input-@popover-arrow-width aria-describedby=help-block-@popover-arrow-width value=10px data-var=@popover-arrow-width> <p class=help-block id=help-block-@popover-arrow-width>Popover arrow width</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-arrow-color>@popover-arrow-color</label> <input class=form-control id=input-@popover-arrow-color aria-describedby=help-block-@popover-arrow-color value=@popover-bg data-var=@popover-arrow-color> <p class=help-block id=help-block-@popover-arrow-color>Popover arrow color</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-width>@popover-arrow-outer-width</label> <input class=form-control id=input-@popover-arrow-outer-width aria-describedby=help-block-@popover-arrow-outer-width value="(@popover-arrow-width + 1)" data-var=@popover-arrow-outer-width> <p class=help-block id=help-block-@popover-arrow-outer-width>Popover outer arrow width</p> </div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-color>@popover-arrow-outer-color</label> <input class=form-control id=input-@popover-arrow-outer-color aria-describedby=help-block-@popover-arrow-outer-color value="fadein(@popover-border-color, 5%)" data-var=@popover-arrow-outer-color> <p class=help-block id=help-block-@popover-arrow-outer-color>Popover outer arrow color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@popover-arrow-outer-fallback-color>@popover-arrow-outer-fallback-color</label> <input class=form-control id=input-@popover-arrow-outer-fallback-color aria-describedby=help-block-@popover-arrow-outer-fallback-color value="darken(@popover-fallback-border-color, 20%)" data-var=@popover-arrow-outer-fallback-color> <p class=help-block id=help-block-@popover-arrow-outer-fallback-color>Popover outer arrow fallback color</p> </div> </div> <h2 id=labels>Labels</h2> <div class=row> <div class=col-xs-4> <label for=input-@label-default-bg>@label-default-bg</label> <input class=form-control id=input-@label-default-bg aria-describedby=help-block-@label-default-bg value=@gray-light data-var=@label-default-bg> <p class=help-block id=help-block-@label-default-bg>Default label background color</p> </div> <div class=col-xs-4> <label for=input-@label-primary-bg>@label-primary-bg</label> <input class=form-control id=input-@label-primary-bg aria-describedby=help-block-@label-primary-bg value=@brand-primary data-var=@label-primary-bg> <p class=help-block id=help-block-@label-primary-bg>Primary label background color</p> </div> <div class=col-xs-4> <label for=input-@label-success-bg>@label-success-bg</label> <input class=form-control id=input-@label-success-bg aria-describedby=help-block-@label-success-bg value=@brand-success data-var=@label-success-bg> <p class=help-block id=help-block-@label-success-bg>Success label background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@label-info-bg>@label-info-bg</label> <input class=form-control id=input-@label-info-bg aria-describedby=help-block-@label-info-bg value=@brand-info data-var=@label-info-bg> <p class=help-block id=help-block-@label-info-bg>Info label background color</p> </div> <div class=col-xs-4> <label for=input-@label-warning-bg>@label-warning-bg</label> <input class=form-control id=input-@label-warning-bg aria-describedby=help-block-@label-warning-bg value=@brand-warning data-var=@label-warning-bg> <p class=help-block id=help-block-@label-warning-bg>Warning label background color</p> </div> <div class=col-xs-4> <label for=input-@label-danger-bg>@label-danger-bg</label> <input class=form-control id=input-@label-danger-bg aria-describedby=help-block-@label-danger-bg value=@brand-danger data-var=@label-danger-bg> <p class=help-block id=help-block-@label-danger-bg>Danger label background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@label-color>@label-color</label> <input class=form-control id=input-@label-color aria-describedby=help-block-@label-color value=#fff data-var=@label-color> <p class=help-block id=help-block-@label-color>Default label text color</p> </div> <div class=col-xs-4> <label for=input-@label-link-hover-color>@label-link-hover-color</label> <input class=form-control id=input-@label-link-hover-color aria-describedby=help-block-@label-link-hover-color value=#fff data-var=@label-link-hover-color> <p class=help-block id=help-block-@label-link-hover-color>Default text color of a linked label</p> </div> </div> <h2 id=modals>Modals</h2> <div class=row> <div class=col-xs-4> <label for=input-@modal-inner-padding>@modal-inner-padding</label> <input class=form-control id=input-@modal-inner-padding aria-describedby=help-block-@modal-inner-padding value=15px data-var=@modal-inner-padding> <p class=help-block id=help-block-@modal-inner-padding>Padding applied to the modal body</p> </div> <div class=col-xs-4> <label for=input-@modal-title-padding>@modal-title-padding</label> <input class=form-control id=input-@modal-title-padding aria-describedby=help-block-@modal-title-padding value=15px data-var=@modal-title-padding> <p class=help-block id=help-block-@modal-title-padding>Padding applied to the modal title</p> </div> <div class=col-xs-4> <label for=input-@modal-title-line-height>@modal-title-line-height</label> <input class=form-control id=input-@modal-title-line-height aria-describedby=help-block-@modal-title-line-height value=@line-height-base data-var=@modal-title-line-height> <p class=help-block id=help-block-@modal-title-line-height>Modal title line-height</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-content-bg>@modal-content-bg</label> <input class=form-control id=input-@modal-content-bg aria-describedby=help-block-@modal-content-bg value=#fff data-var=@modal-content-bg> <p class=help-block id=help-block-@modal-content-bg>Background color of modal content area</p> </div> <div class=col-xs-4> <label for=input-@modal-content-border-color>@modal-content-border-color</label> <input class=form-control id=input-@modal-content-border-color aria-describedby=help-block-@modal-content-border-color value=rgba(0,0,0,.2) data-var=@modal-content-border-color> <p class=help-block id=help-block-@modal-content-border-color>Modal content border color</p> </div> <div class=col-xs-4> <label for=input-@modal-content-fallback-border-color>@modal-content-fallback-border-color</label> <input class=form-control id=input-@modal-content-fallback-border-color aria-describedby=help-block-@modal-content-fallback-border-color value=#999 data-var=@modal-content-fallback-border-color> <p class=help-block id=help-block-@modal-content-fallback-border-color>Modal content border color <strong>for IE8</strong></p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-backdrop-bg>@modal-backdrop-bg</label> <input class=form-control id=input-@modal-backdrop-bg aria-describedby=help-block-@modal-backdrop-bg value=#000 data-var=@modal-backdrop-bg> <p class=help-block id=help-block-@modal-backdrop-bg>Modal backdrop background color</p> </div> <div class=col-xs-4> <label for=input-@modal-backdrop-opacity>@modal-backdrop-opacity</label> <input class=form-control id=input-@modal-backdrop-opacity aria-describedby=help-block-@modal-backdrop-opacity value=.5 data-var=@modal-backdrop-opacity> <p class=help-block id=help-block-@modal-backdrop-opacity>Modal backdrop opacity</p> </div> <div class=col-xs-4> <label for=input-@modal-header-border-color>@modal-header-border-color</label> <input class=form-control id=input-@modal-header-border-color aria-describedby=help-block-@modal-header-border-color value=#e5e5e5 data-var=@modal-header-border-color> <p class=help-block id=help-block-@modal-header-border-color>Modal header border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-footer-border-color>@modal-footer-border-color</label> <input class=form-control id=input-@modal-footer-border-color aria-describedby=help-block-@modal-footer-border-color value=@modal-header-border-color data-var=@modal-footer-border-color> <p class=help-block id=help-block-@modal-footer-border-color>Modal footer border color</p> </div> <div class=col-xs-4> <label for=input-@modal-lg>@modal-lg</label> <input class=form-control id=input-@modal-lg value=900px data-var=@modal-lg> </div> <div class=col-xs-4> <label for=input-@modal-md>@modal-md</label> <input class=form-control id=input-@modal-md value=600px data-var=@modal-md> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@modal-sm>@modal-sm</label> <input class=form-control id=input-@modal-sm value=300px data-var=@modal-sm> </div> </div> <h2 id=alerts>Alerts</h2> <p>Define alert colors, border radius, and padding.</p> <div class=row> <div class=col-xs-4> <label for=input-@alert-padding>@alert-padding</label> <input class=form-control id=input-@alert-padding value=15px data-var=@alert-padding> </div> <div class=col-xs-4> <label for=input-@alert-border-radius>@alert-border-radius</label> <input class=form-control id=input-@alert-border-radius value=@border-radius-base data-var=@alert-border-radius> </div> <div class=col-xs-4> <label for=input-@alert-link-font-weight>@alert-link-font-weight</label> <input class=form-control id=input-@alert-link-font-weight value=bold data-var=@alert-link-font-weight> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-success-bg>@alert-success-bg</label> <input class=form-control id=input-@alert-success-bg value=@state-success-bg data-var=@alert-success-bg> </div> <div class=col-xs-4> <label for=input-@alert-success-text>@alert-success-text</label> <input class=form-control id=input-@alert-success-text value=@state-success-text data-var=@alert-success-text> </div> <div class=col-xs-4> <label for=input-@alert-success-border>@alert-success-border</label> <input class=form-control id=input-@alert-success-border value=@state-success-border data-var=@alert-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-info-bg>@alert-info-bg</label> <input class=form-control id=input-@alert-info-bg value=@state-info-bg data-var=@alert-info-bg> </div> <div class=col-xs-4> <label for=input-@alert-info-text>@alert-info-text</label> <input class=form-control id=input-@alert-info-text value=@state-info-text data-var=@alert-info-text> </div> <div class=col-xs-4> <label for=input-@alert-info-border>@alert-info-border</label> <input class=form-control id=input-@alert-info-border value=@state-info-border data-var=@alert-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-warning-bg>@alert-warning-bg</label> <input class=form-control id=input-@alert-warning-bg value=@state-warning-bg data-var=@alert-warning-bg> </div> <div class=col-xs-4> <label for=input-@alert-warning-text>@alert-warning-text</label> <input class=form-control id=input-@alert-warning-text value=@state-warning-text data-var=@alert-warning-text> </div> <div class=col-xs-4> <label for=input-@alert-warning-border>@alert-warning-border</label> <input class=form-control id=input-@alert-warning-border value=@state-warning-border data-var=@alert-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@alert-danger-bg>@alert-danger-bg</label> <input class=form-control id=input-@alert-danger-bg value=@state-danger-bg data-var=@alert-danger-bg> </div> <div class=col-xs-4> <label for=input-@alert-danger-text>@alert-danger-text</label> <input class=form-control id=input-@alert-danger-text value=@state-danger-text data-var=@alert-danger-text> </div> <div class=col-xs-4> <label for=input-@alert-danger-border>@alert-danger-border</label> <input class=form-control id=input-@alert-danger-border value=@state-danger-border data-var=@alert-danger-border> </div> </div> <h2 id=progress-bars>Progress bars</h2> <div class=row> <div class=col-xs-4> <label for=input-@progress-bg>@progress-bg</label> <input class=form-control id=input-@progress-bg aria-describedby=help-block-@progress-bg value=#f5f5f5 data-var=@progress-bg> <p class=help-block id=help-block-@progress-bg>Background color of the whole progress component</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-color>@progress-bar-color</label> <input class=form-control id=input-@progress-bar-color aria-describedby=help-block-@progress-bar-color value=#fff data-var=@progress-bar-color> <p class=help-block id=help-block-@progress-bar-color>Progress bar text color</p> </div> <div class=col-xs-4> <label for=input-@progress-border-radius>@progress-border-radius</label> <input class=form-control id=input-@progress-border-radius aria-describedby=help-block-@progress-border-radius value=@border-radius-base data-var=@progress-border-radius> <p class=help-block id=help-block-@progress-border-radius>Variable for setting rounded corners on progress bar.</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@progress-bar-bg>@progress-bar-bg</label> <input class=form-control id=input-@progress-bar-bg aria-describedby=help-block-@progress-bar-bg value=@brand-primary data-var=@progress-bar-bg> <p class=help-block id=help-block-@progress-bar-bg>Default progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-success-bg>@progress-bar-success-bg</label> <input class=form-control id=input-@progress-bar-success-bg aria-describedby=help-block-@progress-bar-success-bg value=@brand-success data-var=@progress-bar-success-bg> <p class=help-block id=help-block-@progress-bar-success-bg>Success progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-warning-bg>@progress-bar-warning-bg</label> <input class=form-control id=input-@progress-bar-warning-bg aria-describedby=help-block-@progress-bar-warning-bg value=@brand-warning data-var=@progress-bar-warning-bg> <p class=help-block id=help-block-@progress-bar-warning-bg>Warning progress bar color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@progress-bar-danger-bg>@progress-bar-danger-bg</label> <input class=form-control id=input-@progress-bar-danger-bg aria-describedby=help-block-@progress-bar-danger-bg value=@brand-danger data-var=@progress-bar-danger-bg> <p class=help-block id=help-block-@progress-bar-danger-bg>Danger progress bar color</p> </div> <div class=col-xs-4> <label for=input-@progress-bar-info-bg>@progress-bar-info-bg</label> <input class=form-control id=input-@progress-bar-info-bg aria-describedby=help-block-@progress-bar-info-bg value=@brand-info data-var=@progress-bar-info-bg> <p class=help-block id=help-block-@progress-bar-info-bg>Info progress bar color</p> </div> </div> <h2 id=list-group>List group</h2> <div class=row> <div class=col-xs-4> <label for=input-@list-group-bg>@list-group-bg</label> <input class=form-control id=input-@list-group-bg aria-describedby=help-block-@list-group-bg value=#fff data-var=@list-group-bg> <p class=help-block id=help-block-@list-group-bg>Background color on <code>.list-group-item</code></p> </div> <div class=col-xs-4> <label for=input-@list-group-border>@list-group-border</label> <input class=form-control id=input-@list-group-border aria-describedby=help-block-@list-group-border value=#ddd data-var=@list-group-border> <p class=help-block id=help-block-@list-group-border><code>.list-group-item</code> border color</p> </div> <div class=col-xs-4> <label for=input-@list-group-border-radius>@list-group-border-radius</label> <input class=form-control id=input-@list-group-border-radius aria-describedby=help-block-@list-group-border-radius value=@border-radius-base data-var=@list-group-border-radius> <p class=help-block id=help-block-@list-group-border-radius>List group border radius</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-hover-bg>@list-group-hover-bg</label> <input class=form-control id=input-@list-group-hover-bg aria-describedby=help-block-@list-group-hover-bg value=#f5f5f5 data-var=@list-group-hover-bg> <p class=help-block id=help-block-@list-group-hover-bg>Background color of single list items on hover</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-color>@list-group-active-color</label> <input class=form-control id=input-@list-group-active-color aria-describedby=help-block-@list-group-active-color value=@component-active-color data-var=@list-group-active-color> <p class=help-block id=help-block-@list-group-active-color>Text color of active list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-bg>@list-group-active-bg</label> <input class=form-control id=input-@list-group-active-bg aria-describedby=help-block-@list-group-active-bg value=@component-active-bg data-var=@list-group-active-bg> <p class=help-block id=help-block-@list-group-active-bg>Background color of active list items</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-active-border>@list-group-active-border</label> <input class=form-control id=input-@list-group-active-border aria-describedby=help-block-@list-group-active-border value=@list-group-active-bg data-var=@list-group-active-border> <p class=help-block id=help-block-@list-group-active-border>Border color of active list elements</p> </div> <div class=col-xs-4> <label for=input-@list-group-active-text-color>@list-group-active-text-color</label> <input class=form-control id=input-@list-group-active-text-color aria-describedby=help-block-@list-group-active-text-color value="lighten(@list-group-active-bg, 40%)" data-var=@list-group-active-text-color> <p class=help-block id=help-block-@list-group-active-text-color>Text color for content within active list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-disabled-color>@list-group-disabled-color</label> <input class=form-control id=input-@list-group-disabled-color aria-describedby=help-block-@list-group-disabled-color value=@gray-light data-var=@list-group-disabled-color> <p class=help-block id=help-block-@list-group-disabled-color>Text color of disabled list items</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-disabled-bg>@list-group-disabled-bg</label> <input class=form-control id=input-@list-group-disabled-bg aria-describedby=help-block-@list-group-disabled-bg value=@gray-lighter data-var=@list-group-disabled-bg> <p class=help-block id=help-block-@list-group-disabled-bg>Background color of disabled list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-disabled-text-color>@list-group-disabled-text-color</label> <input class=form-control id=input-@list-group-disabled-text-color aria-describedby=help-block-@list-group-disabled-text-color value=@list-group-disabled-color data-var=@list-group-disabled-text-color> <p class=help-block id=help-block-@list-group-disabled-text-color>Text color for content within disabled list items</p> </div> <div class=col-xs-4> <label for=input-@list-group-link-color>@list-group-link-color</label> <input class=form-control id=input-@list-group-link-color value=#555 data-var=@list-group-link-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@list-group-link-hover-color>@list-group-link-hover-color</label> <input class=form-control id=input-@list-group-link-hover-color value=@list-group-link-color data-var=@list-group-link-hover-color> </div> <div class=col-xs-4> <label for=input-@list-group-link-heading-color>@list-group-link-heading-color</label> <input class=form-control id=input-@list-group-link-heading-color value=#333 data-var=@list-group-link-heading-color> </div> </div> <h2 id=panels>Panels</h2> <div class=row> <div class=col-xs-4> <label for=input-@panel-bg>@panel-bg</label> <input class=form-control id=input-@panel-bg value=#fff data-var=@panel-bg> </div> <div class=col-xs-4> <label for=input-@panel-body-padding>@panel-body-padding</label> <input class=form-control id=input-@panel-body-padding value=15px data-var=@panel-body-padding> </div> <div class=col-xs-4> <label for=input-@panel-heading-padding>@panel-heading-padding</label> <input class=form-control id=input-@panel-heading-padding value="10px 15px" data-var=@panel-heading-padding> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-footer-padding>@panel-footer-padding</label> <input class=form-control id=input-@panel-footer-padding value=@panel-heading-padding data-var=@panel-footer-padding> </div> <div class=col-xs-4> <label for=input-@panel-border-radius>@panel-border-radius</label> <input class=form-control id=input-@panel-border-radius value=@border-radius-base data-var=@panel-border-radius> </div> <div class=col-xs-4> <label for=input-@panel-inner-border>@panel-inner-border</label> <input class=form-control id=input-@panel-inner-border aria-describedby=help-block-@panel-inner-border value=#ddd data-var=@panel-inner-border> <p class=help-block id=help-block-@panel-inner-border>Border color for elements within panels</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-footer-bg>@panel-footer-bg</label> <input class=form-control id=input-@panel-footer-bg value=#f5f5f5 data-var=@panel-footer-bg> </div> <div class=col-xs-4> <label for=input-@panel-default-text>@panel-default-text</label> <input class=form-control id=input-@panel-default-text value=@gray-dark data-var=@panel-default-text> </div> <div class=col-xs-4> <label for=input-@panel-default-border>@panel-default-border</label> <input class=form-control id=input-@panel-default-border value=#ddd data-var=@panel-default-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-default-heading-bg>@panel-default-heading-bg</label> <input class=form-control id=input-@panel-default-heading-bg value=#f5f5f5 data-var=@panel-default-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-primary-text>@panel-primary-text</label> <input class=form-control id=input-@panel-primary-text value=#fff data-var=@panel-primary-text> </div> <div class=col-xs-4> <label for=input-@panel-primary-border>@panel-primary-border</label> <input class=form-control id=input-@panel-primary-border value=@brand-primary data-var=@panel-primary-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-primary-heading-bg>@panel-primary-heading-bg</label> <input class=form-control id=input-@panel-primary-heading-bg value=@brand-primary data-var=@panel-primary-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-success-text>@panel-success-text</label> <input class=form-control id=input-@panel-success-text value=@state-success-text data-var=@panel-success-text> </div> <div class=col-xs-4> <label for=input-@panel-success-border>@panel-success-border</label> <input class=form-control id=input-@panel-success-border value=@state-success-border data-var=@panel-success-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-success-heading-bg>@panel-success-heading-bg</label> <input class=form-control id=input-@panel-success-heading-bg value=@state-success-bg data-var=@panel-success-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-info-text>@panel-info-text</label> <input class=form-control id=input-@panel-info-text value=@state-info-text data-var=@panel-info-text> </div> <div class=col-xs-4> <label for=input-@panel-info-border>@panel-info-border</label> <input class=form-control id=input-@panel-info-border value=@state-info-border data-var=@panel-info-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-info-heading-bg>@panel-info-heading-bg</label> <input class=form-control id=input-@panel-info-heading-bg value=@state-info-bg data-var=@panel-info-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-warning-text>@panel-warning-text</label> <input class=form-control id=input-@panel-warning-text value=@state-warning-text data-var=@panel-warning-text> </div> <div class=col-xs-4> <label for=input-@panel-warning-border>@panel-warning-border</label> <input class=form-control id=input-@panel-warning-border value=@state-warning-border data-var=@panel-warning-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-warning-heading-bg>@panel-warning-heading-bg</label> <input class=form-control id=input-@panel-warning-heading-bg value=@state-warning-bg data-var=@panel-warning-heading-bg> </div> <div class=col-xs-4> <label for=input-@panel-danger-text>@panel-danger-text</label> <input class=form-control id=input-@panel-danger-text value=@state-danger-text data-var=@panel-danger-text> </div> <div class=col-xs-4> <label for=input-@panel-danger-border>@panel-danger-border</label> <input class=form-control id=input-@panel-danger-border value=@state-danger-border data-var=@panel-danger-border> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@panel-danger-heading-bg>@panel-danger-heading-bg</label> <input class=form-control id=input-@panel-danger-heading-bg value=@state-danger-bg data-var=@panel-danger-heading-bg> </div> </div> <h2 id=thumbnails>Thumbnails</h2> <div class=row> <div class=col-xs-4> <label for=input-@thumbnail-padding>@thumbnail-padding</label> <input class=form-control id=input-@thumbnail-padding aria-describedby=help-block-@thumbnail-padding value=4px data-var=@thumbnail-padding> <p class=help-block id=help-block-@thumbnail-padding>Padding around the thumbnail image</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-bg>@thumbnail-bg</label> <input class=form-control id=input-@thumbnail-bg aria-describedby=help-block-@thumbnail-bg value=@body-bg data-var=@thumbnail-bg> <p class=help-block id=help-block-@thumbnail-bg>Thumbnail background color</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-border>@thumbnail-border</label> <input class=form-control id=input-@thumbnail-border aria-describedby=help-block-@thumbnail-border value=#ddd data-var=@thumbnail-border> <p class=help-block id=help-block-@thumbnail-border>Thumbnail border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@thumbnail-border-radius>@thumbnail-border-radius</label> <input class=form-control id=input-@thumbnail-border-radius aria-describedby=help-block-@thumbnail-border-radius value=@border-radius-base data-var=@thumbnail-border-radius> <p class=help-block id=help-block-@thumbnail-border-radius>Thumbnail border radius</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-caption-color>@thumbnail-caption-color</label> <input class=form-control id=input-@thumbnail-caption-color aria-describedby=help-block-@thumbnail-caption-color value=@text-color data-var=@thumbnail-caption-color> <p class=help-block id=help-block-@thumbnail-caption-color>Custom text color for thumbnail captions</p> </div> <div class=col-xs-4> <label for=input-@thumbnail-caption-padding>@thumbnail-caption-padding</label> <input class=form-control id=input-@thumbnail-caption-padding aria-describedby=help-block-@thumbnail-caption-padding value=9px data-var=@thumbnail-caption-padding> <p class=help-block id=help-block-@thumbnail-caption-padding>Padding around the thumbnail caption</p> </div> </div> <h2 id=wells>Wells</h2> <div class=row> <div class=col-xs-4> <label for=input-@well-bg>@well-bg</label> <input class=form-control id=input-@well-bg value=#f5f5f5 data-var=@well-bg> </div> <div class=col-xs-4> <label for=input-@well-border>@well-border</label> <input class=form-control id=input-@well-border value="darken(@well-bg, 7%)" data-var=@well-border> </div> </div> <h2 id=badges>Badges</h2> <div class=row> <div class=col-xs-4> <label for=input-@badge-color>@badge-color</label> <input class=form-control id=input-@badge-color value=#fff data-var=@badge-color> </div> <div class=col-xs-4> <label for=input-@badge-link-hover-color>@badge-link-hover-color</label> <input class=form-control id=input-@badge-link-hover-color aria-describedby=help-block-@badge-link-hover-color value=#fff data-var=@badge-link-hover-color> <p class=help-block id=help-block-@badge-link-hover-color>Linked badge text color on hover</p> </div> <div class=col-xs-4> <label for=input-@badge-bg>@badge-bg</label> <input class=form-control id=input-@badge-bg value=@gray-light data-var=@badge-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@badge-active-color>@badge-active-color</label> <input class=form-control id=input-@badge-active-color aria-describedby=help-block-@badge-active-color value=@link-color data-var=@badge-active-color> <p class=help-block id=help-block-@badge-active-color>Badge text color in active nav link</p> </div> <div class=col-xs-4> <label for=input-@badge-active-bg>@badge-active-bg</label> <input class=form-control id=input-@badge-active-bg aria-describedby=help-block-@badge-active-bg value=#fff data-var=@badge-active-bg> <p class=help-block id=help-block-@badge-active-bg>Badge background color in active nav link</p> </div> <div class=col-xs-4> <label for=input-@badge-font-weight>@badge-font-weight</label> <input class=form-control id=input-@badge-font-weight value=bold data-var=@badge-font-weight> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@badge-line-height>@badge-line-height</label> <input class=form-control id=input-@badge-line-height value=1 data-var=@badge-line-height> </div> <div class=col-xs-4> <label for=input-@badge-border-radius>@badge-border-radius</label> <input class=form-control id=input-@badge-border-radius value=10px data-var=@badge-border-radius> </div> </div> <h2 id=breadcrumbs>Breadcrumbs</h2> <div class=row> <div class=col-xs-4> <label for=input-@breadcrumb-padding-vertical>@breadcrumb-padding-vertical</label> <input class=form-control id=input-@breadcrumb-padding-vertical value=8px data-var=@breadcrumb-padding-vertical> </div> <div class=col-xs-4> <label for=input-@breadcrumb-padding-horizontal>@breadcrumb-padding-horizontal</label> <input class=form-control id=input-@breadcrumb-padding-horizontal value=15px data-var=@breadcrumb-padding-horizontal> </div> <div class=col-xs-4> <label for=input-@breadcrumb-bg>@breadcrumb-bg</label> <input class=form-control id=input-@breadcrumb-bg aria-describedby=help-block-@breadcrumb-bg value=#f5f5f5 data-var=@breadcrumb-bg> <p class=help-block id=help-block-@breadcrumb-bg>Breadcrumb background color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@breadcrumb-color>@breadcrumb-color</label> <input class=form-control id=input-@breadcrumb-color aria-describedby=help-block-@breadcrumb-color value=#ccc data-var=@breadcrumb-color> <p class=help-block id=help-block-@breadcrumb-color>Breadcrumb text color</p> </div> <div class=col-xs-4> <label for=input-@breadcrumb-active-color>@breadcrumb-active-color</label> <input class=form-control id=input-@breadcrumb-active-color aria-describedby=help-block-@breadcrumb-active-color value=@gray-light data-var=@breadcrumb-active-color> <p class=help-block id=help-block-@breadcrumb-active-color>Text color of current page in the breadcrumb</p> </div> <div class=col-xs-4> <label for=input-@breadcrumb-separator>@breadcrumb-separator</label> <input class=form-control id=input-@breadcrumb-separator aria-describedby=help-block-@breadcrumb-separator value="/" data-var=@breadcrumb-separator> <p class=help-block id=help-block-@breadcrumb-separator>Textual separator for between breadcrumb elements</p> </div> </div> <h2 id=carousel>Carousel</h2> <div class=row> <div class=col-xs-4> <label for=input-@carousel-text-shadow>@carousel-text-shadow</label> <input class=form-control id=input-@carousel-text-shadow value="0 1px 2px rgba(0,0,0,.6)" data-var=@carousel-text-shadow> </div> <div class=col-xs-4> <label for=input-@carousel-control-color>@carousel-control-color</label> <input class=form-control id=input-@carousel-control-color value=#fff data-var=@carousel-control-color> </div> <div class=col-xs-4> <label for=input-@carousel-control-width>@carousel-control-width</label> <input class=form-control id=input-@carousel-control-width value=15% data-var=@carousel-control-width> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@carousel-control-opacity>@carousel-control-opacity</label> <input class=form-control id=input-@carousel-control-opacity value=.5 data-var=@carousel-control-opacity> </div> <div class=col-xs-4> <label for=input-@carousel-control-font-size>@carousel-control-font-size</label> <input class=form-control id=input-@carousel-control-font-size value=20px data-var=@carousel-control-font-size> </div> <div class=col-xs-4> <label for=input-@carousel-indicator-active-bg>@carousel-indicator-active-bg</label> <input class=form-control id=input-@carousel-indicator-active-bg value=#fff data-var=@carousel-indicator-active-bg> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@carousel-indicator-border-color>@carousel-indicator-border-color</label> <input class=form-control id=input-@carousel-indicator-border-color value=#fff data-var=@carousel-indicator-border-color> </div> <div class=col-xs-4> <label for=input-@carousel-caption-color>@carousel-caption-color</label> <input class=form-control id=input-@carousel-caption-color value=#fff data-var=@carousel-caption-color> </div> </div> <h2 id=close>Close</h2> <div class=row> <div class=col-xs-4> <label for=input-@close-font-weight>@close-font-weight</label> <input class=form-control id=input-@close-font-weight value=bold data-var=@close-font-weight> </div> <div class=col-xs-4> <label for=input-@close-color>@close-color</label> <input class=form-control id=input-@close-color value=#000 data-var=@close-color> </div> <div class=col-xs-4> <label for=input-@close-text-shadow>@close-text-shadow</label> <input class=form-control id=input-@close-text-shadow value="0 1px 0 #fff" data-var=@close-text-shadow> </div> </div> <h2 id=code>Code</h2> <div class=row> <div class=col-xs-4> <label for=input-@code-color>@code-color</label> <input class=form-control id=input-@code-color value=#c7254e data-var=@code-color> </div> <div class=col-xs-4> <label for=input-@code-bg>@code-bg</label> <input class=form-control id=input-@code-bg value=#f9f2f4 data-var=@code-bg> </div> <div class=col-xs-4> <label for=input-@kbd-color>@kbd-color</label> <input class=form-control id=input-@kbd-color value=#fff data-var=@kbd-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@kbd-bg>@kbd-bg</label> <input class=form-control id=input-@kbd-bg value=#333 data-var=@kbd-bg> </div> <div class=col-xs-4> <label for=input-@pre-bg>@pre-bg</label> <input class=form-control id=input-@pre-bg value=#f5f5f5 data-var=@pre-bg> </div> <div class=col-xs-4> <label for=input-@pre-color>@pre-color</label> <input class=form-control id=input-@pre-color value=@gray-dark data-var=@pre-color> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@pre-border-color>@pre-border-color</label> <input class=form-control id=input-@pre-border-color value=#ccc data-var=@pre-border-color> </div> <div class=col-xs-4> <label for=input-@pre-scrollable-max-height>@pre-scrollable-max-height</label> <input class=form-control id=input-@pre-scrollable-max-height value=340px data-var=@pre-scrollable-max-height> </div> </div> <h2 id=type>Type</h2> <div class=row> <div class=col-xs-4> <label for=input-@component-offset-horizontal>@component-offset-horizontal</label> <input class=form-control id=input-@component-offset-horizontal aria-describedby=help-block-@component-offset-horizontal value=180px data-var=@component-offset-horizontal> <p class=help-block id=help-block-@component-offset-horizontal>Horizontal offset for forms and lists.</p> </div> <div class=col-xs-4> <label for=input-@text-muted>@text-muted</label> <input class=form-control id=input-@text-muted aria-describedby=help-block-@text-muted value=@gray-light data-var=@text-muted> <p class=help-block id=help-block-@text-muted>Text muted color</p> </div> <div class=col-xs-4> <label for=input-@abbr-border-color>@abbr-border-color</label> <input class=form-control id=input-@abbr-border-color aria-describedby=help-block-@abbr-border-color value=@gray-light data-var=@abbr-border-color> <p class=help-block id=help-block-@abbr-border-color>Abbreviations and acronyms border color</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@headings-small-color>@headings-small-color</label> <input class=form-control id=input-@headings-small-color aria-describedby=help-block-@headings-small-color value=@gray-light data-var=@headings-small-color> <p class=help-block id=help-block-@headings-small-color>Headings small color</p> </div> <div class=col-xs-4> <label for=input-@blockquote-small-color>@blockquote-small-color</label> <input class=form-control id=input-@blockquote-small-color aria-describedby=help-block-@blockquote-small-color value=@gray-light data-var=@blockquote-small-color> <p class=help-block id=help-block-@blockquote-small-color>Blockquote small color</p> </div> <div class=col-xs-4> <label for=input-@blockquote-font-size>@blockquote-font-size</label> <input class=form-control id=input-@blockquote-font-size aria-describedby=help-block-@blockquote-font-size value="(@font-size-base * 1.25)" data-var=@blockquote-font-size> <p class=help-block id=help-block-@blockquote-font-size>Blockquote font size</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@blockquote-border-color>@blockquote-border-color</label> <input class=form-control id=input-@blockquote-border-color aria-describedby=help-block-@blockquote-border-color value=@gray-lighter data-var=@blockquote-border-color> <p class=help-block id=help-block-@blockquote-border-color>Blockquote border color</p> </div> <div class=col-xs-4> <label for=input-@page-header-border-color>@page-header-border-color</label> <input class=form-control id=input-@page-header-border-color aria-describedby=help-block-@page-header-border-color value=@gray-lighter data-var=@page-header-border-color> <p class=help-block id=help-block-@page-header-border-color>Page header border color</p> </div> <div class=col-xs-4> <label for=input-@dl-horizontal-offset>@dl-horizontal-offset</label> <input class=form-control id=input-@dl-horizontal-offset aria-describedby=help-block-@dl-horizontal-offset value=@component-offset-horizontal data-var=@dl-horizontal-offset> <p class=help-block id=help-block-@dl-horizontal-offset>Width of horizontal description list titles</p> </div> <div class=clearfix></div> <div class=col-xs-4> <label for=input-@dl-horizontal-breakpoint>@dl-horizontal-breakpoint</label> <input class=form-control id=input-@dl-horizontal-breakpoint aria-describedby=help-block-@dl-horizontal-breakpoint value=@grid-float-breakpoint data-var=@dl-horizontal-breakpoint> <p class=help-block id=help-block-@dl-horizontal-breakpoint>Point at which .dl-horizontal becomes horizontal</p> </div> <div class=col-xs-4> <label for=input-@hr-border>@hr-border</label> <input class=form-control id=input-@hr-border aria-describedby=help-block-@hr-border value=@gray-lighter data-var=@hr-border> <p class=help-block id=help-block-@hr-border>Horizontal line color.</p> </div> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p> <div class=bs-customize-download> <button type=submit id=btn-compile disabled class="btn btn-block btn-lg btn-outline" onclick='ga("send","event","Customize","Download","Customize and Download")'>Compile and Download</button> </div> </div> </form> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li><a href=#import-drop-target>Import</a></li> <li><a href=#less>Less components</a></li> <li><a href=#plugins>jQuery plugins</a></li> <li><a href=#less-variables>Less variables</a> <ul class=nav> <li><a href=#colors>Colors</a></li> <li><a href=#scaffolding>Scaffolding</a></li> <li><a href=#typography>Typography</a></li> <li><a href=#iconography>Iconography</a></li> <li><a href=#components>Components</a></li> <li><a href=#tables>Tables</a></li> <li><a href=#buttons>Buttons</a></li> <li><a href=#forms>Forms</a></li> <li><a href=#dropdowns>Dropdowns</a></li> <li><a href=#media-queries-breakpoints>Media queries breakpoints</a></li> <li><a href=#grid-system>Grid system</a></li> <li><a href=#container-sizes>Container sizes</a></li> <li><a href=#navbar>Navbar</a></li> <li><a href=#navs>Navs</a></li> <li><a href=#tabs>Tabs</a></li> <li><a href=#pills>Pills</a></li> <li><a href=#pagination>Pagination</a></li> <li><a href=#pager>Pager</a></li> <li><a href=#jumbotron>Jumbotron</a></li> <li><a href=#form-states-and-alerts>Form states and alerts</a></li> <li><a href=#tooltips>Tooltips</a></li> <li><a href=#popovers>Popovers</a></li> <li><a href=#labels>Labels</a></li> <li><a href=#modals>Modals</a></li> <li><a href=#alerts>Alerts</a></li> <li><a href=#progress-bars>Progress bars</a></li> <li><a href=#list-group>List group</a></li> <li><a href=#panels>Panels</a></li> <li><a href=#thumbnails>Thumbnails</a></li> <li><a href=#wells>Wells</a></li> <li><a href=#badges>Badges</a></li> <li><a href=#breadcrumbs>Breadcrumbs</a></li> <li><a href=#carousel>Carousel</a></li> <li><a href=#close>Close</a></li> <li><a href=#code>Code</a></li> <li><a href=#type>Type</a></li> </ul> </li> <li><a href=#download>Download</a></li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script>var __configBridge={autoprefixerBrowsers:["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],jqueryCheck:["if (typeof jQuery === 'undefined') {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery')","}\n"],jqueryVersionCheck:["+function ($) {"," 'use strict';"," var version = $.fn.jquery.split(' ')[0].split('.')"," if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')"," }","}(jQuery);\n\n"]}</script> <script src=../assets/js/customize.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Getting started · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li class=active> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download compiled")'>Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download source")'>Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download Sass")'>Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href=https://www.maxcdn.com/ >MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.bootstrapcdn.com/ >Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Getting started · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li class=active> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download compiled")'>Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download source")'>Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download Sass")'>Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href=https://www.maxcdn.com/ >MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.bootstrapcdn.com/ >Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
<span class=c><!-- Optional theme --></span>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li>
- <li><a href=https://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li>
<li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li>
<li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li>
</ul>
<p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p class=lead> <a href=getting-started#download class="btn btn-outline-inverse btn-lg" onclick='ga("send","event","Jumbotron actions","Download","Download 3.3.7")'>Download Bootstrap</a> </p>
<p class=version>Currently v3.3.7</p>
- <div id=carbonads-container>
- <div class=carbonad>
- <div id=azcarbon></div>
- <script>
- var z = document.createElement("script");
- z.async = !0, z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";
- var s = document.getElementsByTagName("script")[0];
- s.parentNode.insertBefore(z, s)
- </script>
- </div>
- </div>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</main>
<div class=bs-docs-featurette>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> JavaScript · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li class=active> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=js-overview>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> JavaScript · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li class=active> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=js-overview>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>({</span> <span class=na>keyboard</span><span class=p>:</span> <span class=kc>false</span> <span class=p>})</span> <span class=c1>// initialized with no keyboard</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>(</span><span class=s1>'show'</span><span class=p>)</span> <span class=c1>// initializes and invokes show immediately</span></code></pre></figure> <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <h4>Default settings</h4> <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>modal</span><span class=p>.</span><span class=nx>Constructor</span><span class=p>.</span><span class=nx>DEFAULTS</span><span class=p>.</span><span class=nx>keyboard</span> <span class=o>=</span> <span class=kc>false</span> <span class=c1>// changes default for the modal plugin's `keyboard` option to false</span></code></pre></figure> <h2 id=js-noconflict>No conflict</h2> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=kd>var</span> <span class=nx>bootstrapButton</span> <span class=o>=</span> <span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>button</span><span class=p>.</span><span class=nx>noConflict</span><span class=p>()</span> <span class=c1>// return $.fn.button to previously assigned value</span>
<span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>bootstrapBtn</span> <span class=o>=</span> <span class=nx>bootstrapButton</span> <span class=c1>// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></figure> <h2 id=js-events>Events</h2> <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p> <p>As of 3.0.0, all Bootstrap events are namespaced.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>on</span><span class=p>(</span><span class=s1>'show.bs.modal'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>(</span><span class=nx>e</span><span class=p>)</span> <span class=p>{</span>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Migrating to v3.x · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
s://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li> <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s)</script></div></div> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href=http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ >what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href=http://twitter.github.io/typeahead.js/ >Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href=http://bootply.com/ >Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Migrating to v3.x · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]--> <link href=/apple-touch-icon.png rel=apple-touch-icon> <link href=/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=http
://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href=http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ >what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href=http://twitter.github.io/typeahead.js/ >Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href=http://bootply.com/ >Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script> <script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
\ No newline at end of file
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Brand guidelines">
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/brand/">
<meta property="og:title" content="Brand guidelines">
<meta property="og:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp’s <a href="https://mailchimp.com/about/brand-assets/">Brand Assets</a>.</p>
<div class="bd-brand-logos">
<div class="bd-brand-item">
- <img class="svg" src="/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
+ <img class="svg" src="/docs/4.0/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
</div>
<div class="bd-brand-item inverse">
- <img class="svg" src="/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
+ <img class="svg" src="/docs/4.0/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
</div>
</div>
<div class="bd-brand-logos">
<div class="bd-brand-logos">
<div class="bd-brand-item">
- <img class="svg" src="/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
+ <img class="svg" src="/docs/4.0/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
</div>
<div class="bd-brand-item inverse">
- <img class="svg" src="/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
+ <img class="svg" src="/docs/4.0/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
</div>
<div class="bd-brand-item inverse">
- <img class="svg" src="/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" />
+ <img class="svg" src="/docs/4.0/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" />
</div>
</div>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="History">
<meta name="twitter:description" content="A brief overview of the history of Bootstrap.">
- <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+ <meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:description" content="A brief overview of the history of Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Introduction
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Overview
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Reboot
</a>
-
+
</li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
-
+
</li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
-
+
</li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
-
+
</li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
-
+
</li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Alerts
</a>
-
+
</li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
-
+
</li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
-
+
</li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
-
+
</li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
-
+
</li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
-
+
</li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
-
+
</li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
-
+
</li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
-
+
</li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
-
+
</li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
-
+
</li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
-
+
</li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
-
+
</li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
-
+
</li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
-
+
</li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
-
+
</li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
-
+
</li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Borders
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Icons
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
History
</a>
-
+
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
-
+
</li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
-
+
</li><li>
<a href="/docs/4.0/about/license/">
License
</a>
-
+
</li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
-
+
</li></ul>
</div></nav>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">History</h1>
<p class="bd-lead">A brief overview of the history of Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
-<p>Originally <a href="https://blog.twitter.com/2011/bootstrap-from-twitter">released</a> on
<a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
+<p>Originally <a href="https://blog.twitter.com/2011/bootstrap-from-twitter">released</a> on
August 19, 2011, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
</main>
</div>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="License FAQs">
<meta name="twitter:description" content="Commonly asked questions about Bootstrap’s open source license.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/license/">
<meta property="og:title" content="License FAQs">
<meta property="og:description" content="Commonly asked questions about Bootstrap’s open source license.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap is released under the MIT license and is copyright 2018 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="About">
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/overview/">
<meta property="og:title" content="About">
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="team">Team</h2>
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
-<p>Originally <a href="https://blog.twitter.com/2011/bootstrap-from-twitter">released</a> on
<a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
+<p>Originally <a href="https://blog.twitter.com/2011/bootstrap-from-twitter">released</a> on
August 19, 2011, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Team">
<meta name="twitter:description" content="An overview of the founding team and core contributors to Bootstrap.">
- <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+ <meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:description" content="An overview of the founding team and core contributors to Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Team</h1>
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Translations">
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/translations/">
<meta property="og:title" content="Translations">
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
<browserconfig>
<msapplication>
<tile>
- <square150x150logo src="/assets/img/favicons/mstile-150x150.png"/>
+ <square150x150logo src="/docs/4.0/assets/img/favicons/mstile-150x150.png"/>
<TileColor>#563d7c</TileColor>
</tile>
</msapplication>
"short_name": "Bootstrap",
"icons": [
{
- "src": "/assets/img/favicons/android-chrome-192x192.png",
+ "src": "/docs/4.0/assets/img/favicons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
- "src": "/assets/img/favicons/android-chrome-512x512.png",
+ "src": "/docs/4.0/assets/img/favicons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Wall of browser bugs">
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/browser-bugs/">
<meta property="og:title" content="Wall of browser bugs">
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
<p class="bd-lead"></p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Alerts">
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/alerts/">
<meta property="og:title" content="Alerts">
<meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="examples">Examples</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Badges">
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/badge/">
<meta property="og:title" content="Badges">
<meta property="og:description" content="Documentation and examples for badges, our small count and labeling component.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="example">Example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Breadcrumb">
<meta name="twitter:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
<meta property="og:title" content="Breadcrumb">
<meta property="og:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Button group">
<meta name="twitter:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/button-group/">
<meta property="og:title" content="Button group">
<meta property="og:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<p class="bd-lead">Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="basic-example">Basic example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Buttons">
<meta name="twitter:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/buttons/">
<meta property="og:title" content="Buttons">
<meta property="og:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="examples">Examples</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Cards">
<meta name="twitter:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/card/">
<meta property="og:title" content="Cards">
<meta property="og:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="about">About</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Carousel">
<meta name="twitter:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/carousel/">
<meta property="og:title" content="Carousel">
<meta property="og:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Collapse">
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/collapse/">
<meta property="og:title" content="Collapse">
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="example">Example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Dropdowns">
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/dropdowns/">
<meta property="og:title" content="Dropdowns">
<meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<h2 id="accessibility">Accessibility</h2>
-<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/TR/wai-aria
/roles#menu"><code class="highlighter-rouge">role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
+<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/TR/wai-aria
-practices-1.1/#menu"><code class="highlighter-rouge">role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code class="highlighter-rouge">role</code> and <code class="highlighter-rouge">aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Forms">
<meta name="twitter:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/forms/">
<meta property="og:title" content="Forms">
<meta property="og:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Input group">
<meta name="twitter:description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/input-group/">
<meta property="og:title" content="Input group">
<meta property="og:description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<p class="bd-lead">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="basic-example">Basic example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Jumbotron">
<meta name="twitter:description" content="Lightweight, flexible component for showcasing hero unit style content.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/jumbotron/">
<meta property="og:title" content="Jumbotron">
<meta property="og:description" content="Lightweight, flexible component for showcasing hero unit style content.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="List group">
<meta name="twitter:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/list-group/">
<meta property="og:title" content="List group">
<meta property="og:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<p class="bd-lead">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="basic-example">Basic example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Modal">
<meta name="twitter:description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/modal/">
<meta property="og:title" content="Modal">
<meta property="og:description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<p class="bd-lead">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Navbar">
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navbar/">
<meta property="og:title" content="Navbar">
<meta property="og:description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Just an image --></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
- <span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
+ <span class="nt"><img</span> <span class="na">src=</span><span class="s">"/docs/4.0/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Image and text --></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
- <span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">class=</span><span class="s">"d-inline-block align-top"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
+ <span class="nt"><img</span> <span class="na">src=</span><span class="s">"/docs/4.0/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">class=</span><span class="s">"d-inline-block align-top"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
Bootstrap
<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></div>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Navs">
<meta name="twitter:description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navs/">
<meta property="og:title" content="Navs">
<meta property="og:description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="base-nav">Base nav</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Pagination">
<meta name="twitter:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/pagination/">
<meta property="og:title" content="Pagination">
<meta property="og:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Popovers">
<meta name="twitter:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/popovers/">
<meta property="og:title" content="Popovers">
<meta property="og:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<p class="bd-lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Progress">
<meta name="twitter:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/progress/">
<meta property="og:title" content="Progress">
<meta property="og:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<p class="bd-lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Scrollspy">
<meta name="twitter:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/scrollspy/">
<meta property="og:title" content="Scrollspy">
<meta property="og:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<p class="bd-lead">Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Tooltips">
<meta name="twitter:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/tooltips/">
<meta property="og:title" content="Tooltips">
<meta property="og:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<p class="bd-lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Code">
<meta name="twitter:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/code/">
<meta property="og:title" content="Code">
<meta property="og:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="inline-code">Inline code</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Figures">
<meta name="twitter:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/figures/">
<meta property="og:title" content="Figures">
<meta property="og:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code class="highlighter-rouge"><figure></code>.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Images">
<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/images/">
<meta property="og:title" content="Images">
<meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<p class="bd-lead">Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="responsive-images">Responsive images</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Reboot">
<meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/reboot/">
<meta property="og:title" content="Reboot">
<meta property="og:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<p class="bd-lead">Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="approach">Approach</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Tables">
<meta name="twitter:description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/tables/">
<meta property="og:title" content="Tables">
<meta property="og:description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<p class="bd-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="examples">Examples</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Typography">
<meta name="twitter:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/typography/">
<meta property="og:title" content="Typography">
<meta property="og:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="global-settings">Global settings</h2>
<div class="container">
<div class="py-5 text-center">
- <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<body>
<form class="form-signin">
<div class="text-center mb-4">
- <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
</div>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Examples">
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/examples/">
<meta property="og:title" content="Examples">
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
<a href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
</header>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
- <img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
+ <img class="mr-3" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
<small>Since 2011</small>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
- <img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
+ <img class="mb-2" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<body class="text-center">
<form class="form-signin">
- <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Approach">
<meta name="twitter:description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/extend/approach/">
<meta property="og:title" content="Approach">
<meta property="og:description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<p class="bd-lead">Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on <em>why</em> we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Icons">
<meta name="twitter:description" content="Guidance and suggestions for using external icon libraries with Bootstrap.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/extend/icons/">
<meta property="og:title" content="Icons">
<meta property="og:description" content="Guidance and suggestions for using external icon libraries with Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Extend">
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/extend/">
<meta property="og:title" content="Extend">
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Extend</h1>
<p class="bd-lead"></p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>todo: this entire page</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Accessibility">
<meta name="twitter:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/accessibility/">
<meta property="og:title" content="Accessibility">
<meta property="og:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Best practices">
<meta name="twitter:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/best-practices/">
<meta property="og:title" content="Best practices">
<meta property="og:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<p class="bd-lead">Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Browsers and devices">
<meta name="twitter:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/">
<meta property="og:title" content="Browsers and devices">
<meta property="og:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<p class="bd-lead">Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="supported-browsers">Supported browsers</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Build tools">
<meta name="twitter:description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/build-tools/">
<meta property="og:title" content="Build tools">
<meta property="og:description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<p class="bd-lead">Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="tooling-setup">Tooling setup</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Contents">
<meta name="twitter:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/contents/">
<meta property="og:title" content="Contents">
<meta property="og:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<p class="bd-lead">Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Download">
<meta name="twitter:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/download/">
<meta property="og:title" content="Download">
<meta property="og:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<p class="bd-lead">Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="quick-start">Quick start</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="JavaScript">
<meta name="twitter:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/javascript/">
<meta property="og:title" content="JavaScript">
<meta property="og:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<p class="bd-lead">Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="individual-or-compiled">Individual or compiled</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Theming Bootstrap">
<meta name="twitter:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/theming/">
<meta property="og:title" content="Theming Bootstrap">
<meta property="og:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p class="bd-lead">Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="introduction">Introduction</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Webpack">
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Webpack 3.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/webpack/">
<meta property="og:title" content="Webpack">
<meta property="og:description" content="Learn how to include Bootstrap in your project using Webpack 3.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack 3.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Grid system">
<meta name="twitter:description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/layout/grid/">
<meta property="og:title" content="Grid system">
<meta property="og:description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<p class="bd-lead">Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Media object">
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/layout/media-object/">
<meta property="og:title" content="Media object">
<meta property="og:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="example">Example</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Overview">
<meta name="twitter:description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/layout/overview/">
<meta property="og:title" content="Overview">
<meta property="og:description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<p class="bd-lead">Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="containers">Containers</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Utilities for layout">
<meta name="twitter:description" content="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/">
<meta property="og:title" content="Utilities for layout">
<meta property="og:description" content="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</h1>
<p class="bd-lead">For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="changing-display">Changing <code class="highlighter-rouge">display</code></h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Migrating to v4">
<meta name="twitter:description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/migration/">
<meta property="og:title" content="Migrating to v4">
<meta property="og:description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<p class="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="stable-changes">Stable changes</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Borders">
<meta name="twitter:description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/borders/">
<meta property="og:title" content="Borders">
<meta property="og:description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<p class="bd-lead">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="border">Border</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Clearfix">
<meta name="twitter:description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/clearfix/">
<meta property="og:title" content="Clearfix">
<meta property="og:description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Easily clear <code class="highlighter-rouge">float</code>s by adding <code class="highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Close icon">
<meta name="twitter:description" content="Use a generic close icon for dismissing content like modals and alerts.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/close-icon/">
<meta property="og:title" content="Close icon">
<meta property="og:description" content="Use a generic close icon for dismissing content like modals and alerts.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="highlighter-rouge">aria-label</code>.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Colors">
<meta name="twitter:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/colors/">
<meta property="og:title" content="Colors">
<meta property="og:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<p class="bd-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="color">Color</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Display property">
<meta name="twitter:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/display/">
<meta property="og:title" content="Display property">
<meta property="og:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<p class="bd-lead">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Embeds">
<meta name="twitter:description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/embed/">
<meta property="og:title" content="Embeds">
<meta property="og:description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<p class="bd-lead">Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="about">About</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Flex">
<meta name="twitter:description" content="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/flex/">
<meta property="og:title" content="Flex">
<meta property="og:description" content="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<p class="bd-lead">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Float">
<meta name="twitter:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/float/">
<meta property="og:title" content="Float">
<meta property="og:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Image replacement">
<meta name="twitter:description" content="Swap text for background images with the image replacement class.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/image-replacement/">
<meta property="og:title" content="Image replacement">
<meta property="og:description" content="Swap text for background images with the image replacement class.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Utilize the <code class="highlighter-rouge">.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>
<p>Use the <code class="highlighter-rouge">.text-hide</code> class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a <code class="highlighter-rouge">background-image</code> instead of text.</p>
<div class="bd-example">
-<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
+<h1 class="text-hide" style="background-image: url('/docs/4.0/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
</div>
-<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-hide"</span> <span class="na">style=</span><span class="s">"background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></div>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-hide"</span> <span class="na">style=</span><span class="s">"background-image: url('/docs/4.0/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></div>
</main>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Position">
<meta name="twitter:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/position/">
<meta property="og:title" content="Position">
<meta property="og:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="common-values">Common values</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Screenreaders">
<meta name="twitter:description" content="Use screenreader utilities to hide elements on all devices except screen readers.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/screenreaders/">
<meta property="og:title" content="Screenreaders">
<meta property="og:description" content="Use screenreader utilities to hide elements on all devices except screen readers.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screenreaders</h1>
<p class="bd-lead">Use screenreader utilities to hide elements on all devices except screen readers.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code class="highlighter-rouge">.sr-only</code>. Combine <code class="highlighter-rouge">.sr-only</code> with <code class="highlighter-rouge">.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">></span>Skip to main content<span class="nt"></a></span></code></pre></figure>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Sizing">
<meta name="twitter:description" content="Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/sizing/">
<meta property="og:title" content="Sizing">
<meta property="og:description" content="Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<p class="bd-lead">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Width and height utilities are generated from the <code class="highlighter-rouge">$sizes</code> Sass map in <code class="highlighter-rouge">_variables.scss</code>. Includes support for <code class="highlighter-rouge">25%</code>, <code class="highlighter-rouge">50%</code>, <code class="highlighter-rouge">75%</code>, and <code class="highlighter-rouge">100%</code> by default. Modify those values as you need to generate different utilities here.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Spacing">
<meta name="twitter:description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/spacing/">
<meta property="og:title" content="Spacing">
<meta property="og:description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<p class="bd-lead">Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Text">
<meta name="twitter:description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/text/">
<meta property="og:title" content="Text">
<meta property="og:description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="text-alignment">Text alignment</h2>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Vertical alignment">
<meta name="twitter:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/vertical-align/">
<meta property="og:title" content="Vertical alignment">
<meta property="og:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code class="highlighter-rouge">vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="apple-touch-icon" href="/docs/4.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="/docs/4.0/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="/docs/4.0/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
-<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
+<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Visibility">
<meta name="twitter:description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
-<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/utilities/visibility/">
<meta property="og:title" content="Visibility">
<meta property="og:description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
<meta property="og:type" content="website">
-<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
-<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
- <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+ <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Set the <code class="highlighter-rouge">visibility</code> of elements with our visibility utilities. These do not modify the <code class="highlighter-rouge">display</code> value at all and are helpful for hiding content from most users, but still keeping them for screen readers.</p>
<body>
<form class="form-signin">
<div class="text-center mb-4">
- <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <img class="mb-4" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
</div>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
- <img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
+ <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
<small>Since 2011</small>
projects / thirdparty / bootstrap.git / commitdiff
