·
<a href="https://github.com/twbs/bootstrap/issues/new?template=feature.md&labels=feature">Request feature</a>
·
- <a href="https://themes.getbootstrap.com/">Themes</a>
- ·
<a href="https://blog.getbootstrap.com/">Blog</a>
</p>
-<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/about/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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 Friday, 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> </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/v3.3.7/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/ rel=noopener 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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
+<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/about/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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 Friday, 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> </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/v3.3.7/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/ rel=noopener 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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
-<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/browser-bugs/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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="https://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="https://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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
\ 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 rel="canonical" href="https://getbootstrap.com/docs/3.3/browser-bugs/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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="https://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="https://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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
\ 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 rel="canonical" href="https://getbootstrap.com/docs/3.3/components/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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=https://www.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=https://www.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 rel="canonical" href="https://getbootstrap.com/docs/3.3/components/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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=https://www.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=https://www.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 rel="canonical" href="https://getbootstrap.com/docs/3.3/css/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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>
+<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/css/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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/ rel=noopener target=_blank>Normalize.css</a>, a project by <a href=https://twitter.com/necolas rel=noopener target=_blank>Nicolas Gallagher</a> and <a href=https://twitter.com/jon_neal rel=noopener 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>
</p>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</div>
-
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
</a>
</div><!-- /.carousel -->
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
-
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
</div><!-- /.container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
-
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</footer>
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</nav>
-
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div><!--/.container-->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div><!-- /.container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
-
<div class="page-header">
<h1>Buttons</h1>
</div>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
-
<div class="page-header">
<h1>Tables</h1>
</div>
</div>
</div>
-
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
-
<div class="page-header">
<h1>Labels</h1>
</div>
<span class="label label-danger">Danger</span>
</p>
-
<div class="page-header">
<h1>Badges</h1>
</div>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
-
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
</ul>
</div>
-
<div class="page-header">
<h1>Navs</h1>
</div>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
-
<div class="page-header">
<h1>Navbars</h1>
</div>
</div>
</nav>
-
<div class="page-header">
<h1>Alerts</h1>
</div>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
-
<div class="page-header">
<h1>Progress bars</h1>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div>
-
<div class="page-header">
<h1>List groups</h1>
</div>
</div><!-- /.col-sm-4 -->
</div>
-
<div class="page-header">
<h1>Panels</h1>
</div>
</div><!-- /.col-sm-4 -->
</div>
-
<div class="page-header">
<h1>Wells</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
-
<div class="page-header">
<h1>Carousel</h1>
</div>
</a>
</div>
-
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<button type="button" class="btn btn-default tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
-<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/getting-started/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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.jsdelivr.com/ >jsDelivr</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.jsdelivr.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 rel="canonical" href="https://getbootstrap.com/docs/3.3/getting-started/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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.jsdelivr.com/ >jsDelivr</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.jsdelivr.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://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/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>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
- <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li>
+
<li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li>
<li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li>
</ul>
</p>
<p class="lead">
- <a href="https://themes.getbootstrap.com/" class="btn btn-outline btn-lg">Browse themes</a>
+
</p>
<img class="img-responsive" src="assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388" style="margin-left: auto; margin-right: auto;">
-<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/javascript/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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>
+<!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 rel="canonical" href="https://getbootstrap.com/docs/3.3/javascript/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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 rel="canonical" href="https://getbootstrap.com/docs/3.3/migration/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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=https://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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
\ 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 rel="canonical" href="https://getbootstrap.com/docs/3.3/migration/"> <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://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <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","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),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>There's a newer version of Bootstrap!</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=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://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=https://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 rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener 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/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">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>
\ No newline at end of file
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>About</h1>
<p>Originally <a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html">released</a> on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, 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>
-
<!-- Team
================================================== -->
<div class="bs-docs-section">
<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>
-
<!-- Brand
================================================== -->
<div class="bs-docs-section">
<a href="#brand">Brand guidelines</a>
</li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>Wall of browser bugs</h1>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>Components</h1>
</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">
</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">
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example" data-example-id="simple-nav-pills">
...
<span class="nt"></ul></span></code></pre></figure>
-
<h2 id="nav-justified">Justified</h2>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
...
<span class="nt"></ul></span></code></pre></figure>
-
<h2 id="nav-disabled-links">Disabled links</h2>
<p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
...
<span class="nt"></ul></span></code></pre></figure>
-
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="/docs/3.4/javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
<span class="nt"></nav></span></code></pre></figure>
-
<h2 id="navbar-brand-image">Brand image</h2>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<div class="bs-example" data-example-id="navbar-with-image-brand">
<span class="nt"></div></span>
<span class="nt"></nav></span></code></pre></figure>
-
<h2 id="navbar-forms">Forms</h2>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
</div>
-
<h2 id="navbar-buttons">Buttons</h2>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<div class="bs-example" data-example-id="navbar-button">
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">></span>Signed in as Mark Otto<span class="nt"></p></span></code></pre></figure>
-
<h2 id="navbar-links">Non-nav links</h2>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example" data-example-id="navbar-link">
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"navbar-text navbar-right"</span><span class="nt">></span>Signed in as <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">></span>Mark Otto<span class="nt"></a></p></span></code></pre></figure>
-
<h2 id="navbar-component-alignment">Component alignment</h2>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<p>We'll revisit this when we can rewrite that component in v4.</p>
</div>
-
<h2 id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
-
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<div class="bs-example bs-navbar-bottom-example" data-example-id="navbar-fixed-to-bottom">
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
-
<h2 id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<span class="nt"></div></span>
<span class="nt"></nav></span></code></pre></figure>
-
<h2 id="navbar-inverted">Inverted navbar</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example" data-example-id="inverted-navbar">
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
<h3>Sizing</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
<div class="bs-example" data-example-id="pagination-sizing">
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>...<span class="nt"></ul></nav></span>
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">><ul</span> <span class="na">class=</span><span class="s">"pagination pagination-sm"</span><span class="nt">></span>...<span class="nt"></ul></nav></span></code></pre></figure>
-
<h2 id="pagination-pager">Pager</h2>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
<h3>Optional disabled state</h3>
<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
<div class="bs-example" data-example-id="disabled-pager">
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
<h2 id="progress-alternatives">Contextual alternatives</h2>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example" data-example-id="contextual-progress-bar">
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
<h2 id="panels-list-group">With list groups</h2>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example" data-example-id="panel-with-list-group">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"well well-sm"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
</div>
-
</div>
<div class="col-md-3" role="complementary">
<li><a href="#responsive-embed">Responsive embed</a></li>
<li><a href="#wells">Wells</a></li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>CSS</h1>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"</span><span class="nt">></span>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
<h2 id="grid-remove-gutters">Remove gutters</h2>
<p>Remove the gutters from a row and it's columns with the <code>.row-no-gutters</code> class.</p>
<div class="row row-no-gutters show-grid">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">></span>.col-xs-6<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
<h2 id="grid-offsetting">Offsetting columns</h2>
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="row show-grid">
<span class="nt"><h5></span>h5. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h5></span>
<span class="nt"><h6></span>h6. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h6></span></code></pre></figure>
-
<!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html">You can use the mark tag to <span class="nt"><mark></span>highlight<span class="nt"></mark></span> text.</code></pre></figure>
-
<h3>Deleted text</h3>
<p>For indicating blocks of text that have been deleted use the <code><del></code> tag.</p>
<div class="bs-example" data-example-id="simple-del">
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><small></span>This line of text is meant to be treated as fine print.<span class="nt"></small></span></code></pre></figure>
-
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<div class="bs-example" data-example-id="simple-strong">
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">></span>HTML<span class="nt"></abbr></span></code></pre></figure>
-
<!-- Addresses -->
<h2 id="type-addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:#"</span><span class="nt">></span>first.last@example.com<span class="nt"></a></span>
<span class="nt"></address></span></code></pre></figure>
-
<!-- Blockquotes -->
<h2 id="type-blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
...
<span class="nt"></blockquote></span></code></pre></figure>
-
<!-- Lists -->
<h2 id="type-lists">Lists</h2>
...
<span class="nt"></table></span></code></pre></figure>
-
<h2 id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
<div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
...
<span class="nt"></table></span></code></pre></figure>
-
<h2 id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example" data-example-id="bordered-table">
...
<span class="nt"></table></span></code></pre></figure>
-
<h2 id="tables-hover-rows">Hover rows</h2>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
<div class="bs-example" data-example-id="hoverable-table">
...
<span class="nt"></table></span></code></pre></figure>
-
<h2 id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-example" data-example-id="condensed-table">
...
<span class="nt"></table></span></code></pre></figure>
-
<h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="table-responsive">
<p>Do not mix form groups directly with <a href="/docs/3.4/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
-
<h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code><form></code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<div class="bs-callout bs-callout-danger" id="callout-inline-form-width">
<span class="nt"></div></span>
<span class="nt"></form></span></code></pre></figure>
-
<h2 id="forms-controls">Supported controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
<span class="nt"><option></span>5<span class="nt"></option></span>
<span class="nt"></select></span></code></pre></figure>
-
<h2 id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code><p></code>.</p>
<div class="bs-example" data-example-id="horizontal-static-form-control">
<p>The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state on a <code>.form-control</code>.</p>
</div>
-
<h2 id="forms-control-disabled">Disabled state</h2>
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p>
<div class="bs-example" data-example-id="text-form-control-disabled">
<span class="nt"></fieldset></span>
<span class="nt"></form></span></code></pre></figure>
-
<h2 id="forms-control-readonly">Readonly state</h2>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
<div class="bs-example" data-example-id="readonly-text-form-control">
</div><!-- /.bs-example -->
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">></span></code></pre></figure>
-
<h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"helpBlock"</span> <span class="na">class=</span><span class="s">"help-block"</span><span class="nt">></span>A block of help text that breaks onto a new line and may extend beyond one line.<span class="nt"></span></span></code></pre></figure>
</div>
-
<h2 id="forms-control-validation">Validation states</h2>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputGroupSuccess4Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(success)<span class="nt"></span></span>
<span class="nt"></div></span></code></pre></figure>
-
<h2 id="forms-control-sizes">Control sizing</h2>
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
<span class="nt"></div></span>
<span class="nt"></form></span></code></pre></figure>
-
<h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<div class="bs-example" data-example-id="form-control-column-sizing">
<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-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span>
<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 btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre></figure>
-
<h2 id="buttons-active">Active state</h2>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Primary link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre></figure>
-
<h2 id="buttons-disabled">Disabled state</h2>
<p>Make buttons look unclickable by fading them back with <code>opacity</code>.</p>
</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">"close"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span></code></pre></figure>
-
<h3 id="helper-classes-carets">Carets</h3>
<p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="/docs/3.4/components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<div class="bs-example" data-example-id="caret">
</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">"caret"</span><span class="nt">></span></span></code></pre></figure>
-
<h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</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">"pull-left"</span><span class="nt">></span>...<span class="nt"></div></span>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="/docs/3.4/components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>
-
<h3 id="helper-classes-center">Center content blocks</h3>
<p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</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">"center-block"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
<span class="nc">.center-block</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
<h3 id="helper-classes-clearfix">Clearfix</h3>
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Usage as a class --></span>
<span class="nc">.clearfix</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
<h3 id="helper-classes-show-hide">Showing and hiding content</h3>
<p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
<span class="nc">.hidden</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
<h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="/docs/3.4/getting-started/#accessibility">accessibility best practices</a>. 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>
<span class="nc">.sr-only-focusable</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
<h3 id="helper-classes-image-replacement">Image replacement</h3>
<p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
<figure 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="nt">></span>Custom heading<span class="nt"></h1></span></code></pre></figure>
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
-
<h2 id="responsive-utilities-classes">Available classes</h2>
<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
<div class="table-responsive">
</div>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p>
-
<h2 id="responsive-utilities-tests">Test cases</h2>
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
-
<h2 id="less-bootstrap">Compiling Bootstrap</h2>
<p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="/docs/3.4/getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<span class="k">@caret-width-base</span><span class="nd">:</span> <span class="nt">4px</span><span class="p">;</span>
<span class="k">@caret-width-large</span><span class="nd">:</span> <span class="nt">5px</span><span class="p">;</span></code></pre></figure>
-
<h2 id="less-mixins-vendor">Vendor mixins</h2>
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.</p>
-
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="noopener" target="_blank">helpful article from Mozilla</a>.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<span class="nn">#gradient</span> <span class="o">></span> <span class="nc">.horizontal-three-colors</span><span class="o">(</span><span class="nn">#777</span><span class="p">;</span> <span class="nn">#333</span><span class="p">;</span> <span class="nt">25</span><span class="nv">%</span><span class="p">;</span> <span class="nn">#000</span><span class="o">)</span><span class="p">;</span></code></pre></figure>
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
-
<h2 id="less-mixins-utility">Utility mixins</h2>
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
</div>
<p>Visit the <a href="https://github.com/twbs/bootstrap-sass">Sass port's GitHub repository</a> to see these files in action.</p>
-
<h2 id="sass-installation">Installation</h2>
<p>For information on how to install and use Bootstrap for Sass, consult the <a href="https://github.com/twbs/bootstrap-sass">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
<p>
</p>
</div>
-
</div>
<div class="col-md-3" role="complementary">
</ul>
</li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>Customize and download</h1>
<ul class="nav bs-docs-sidenav">
-
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.pug template.-->
<li><a href="#import-drop-target">Import</a></li>
<li><a href="#less">Less components</a></li>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
<script>var __configBridge = {"autoprefixer":{"browsers":["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],"cascade":false},"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="/docs/3.4/assets/js/customize.min.js"></script>
-
-
</body>
</html>
</p>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</div>
-
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
</a>
</div><!-- /.carousel -->
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
-
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
</div><!-- /.container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
-
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</footer>
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</nav>
-
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div><!--/.container-->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div> <!-- /container -->
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</div><!-- /.container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
-
<div class="page-header">
<h1>Buttons</h1>
</div>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
-
<div class="page-header">
<h1>Tables</h1>
</div>
</div>
</div>
-
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
-
<div class="page-header">
<h1>Labels</h1>
</div>
<span class="label label-danger">Danger</span>
</p>
-
<div class="page-header">
<h1>Badges</h1>
</div>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
-
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
</ul>
</div>
-
<div class="page-header">
<h1>Navs</h1>
</div>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
-
<div class="page-header">
<h1>Navbars</h1>
</div>
</div>
</nav>
-
<div class="page-header">
<h1>Alerts</h1>
</div>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
-
<div class="page-header">
<h1>Progress bars</h1>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div>
-
<div class="page-header">
<h1>List groups</h1>
</div>
</div><!-- /.col-sm-4 -->
</div>
-
<div class="page-header">
<h1>Panels</h1>
</div>
</div><!-- /.col-sm-4 -->
</div>
-
<div class="page-header">
<h1>Wells</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
-
<div class="page-header">
<h1>Carousel</h1>
</div>
</a>
</div>
-
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<button type="button" class="btn btn-default tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>Getting started</h1>
</p>
</div>
-
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
</p>
</div>
-
-
</div>
<div class="col-md-3" role="complementary">
<a href="#eol">End of Life</a>
</li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<main class="bs-docs-masthead" id="content" tabindex="-1">
<div class="container">
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
</p>
<p class="lead">
- <a href="https://themes.getbootstrap.com" class="btn btn-outline btn-lg">Browse themes</a>
+
</p>
<img class="img-responsive" src="/docs/3.4/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
</div>
</div>
-
<div class="bs-docs-featurette">
<div class="container">
<h2 class="bs-docs-featurette-title">Built with Bootstrap</h2>
</div>
</div>
-
<!-- Footer
================================================== -->
<footer class="bs-docs-footer">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>JavaScript</h1>
</ul> <!-- /pills -->
</div> <!-- /example -->
-
<h2 id="dropdowns-usage">Usage</h2>
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
<p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
</div>
</div><!-- /example -->
-
<h2 id="scrollspy-usage">Usage</h2>
<div class="bs-callout bs-callout-warning" id="callout-scrollspy-needs-nav">
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="na">target</span><span class="p">:</span> <span class="s1">'#navbar-example'</span> <span class="p">})</span></code></pre></figure>
-
<h3 id="scrollspy-methods">Methods</h3>
<h4><code>.scrollspy('refresh')</code></h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
<span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
-
<h3 id="scrollspy-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="table-responsive">
<p>This plugin extends the <a href="/docs/3.4/components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
</div>
-
<h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-trigger=</span><span class="s">"focus"</span> <span class="na">title=</span><span class="s">"Dismissible popover"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">></span>Dismissible popover<span class="nt"></a></span></code></pre></figure>
-
<h2 id="popovers-usage">Usage</h2>
<p>Enable popovers via JavaScript:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></figure>
</div>
</div><!-- /example -->
-
<h2 id="alerts-usage">Usage</h2>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
<h4><code>$().alert('close')</code></h4>
<p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p>
-
<h3 id="alerts-events">Events</h3>
<p>Bootstrap's alert plugin exposes a few events for hooking into alert functionality.</p>
<div class="table-responsive">
<h4><code>.carousel('pause')</code></h4>
<p>Stops the carousel from cycling through items.</p>
-
<h4><code>.carousel(number)</code></h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
<span class="p">}</span>
<span class="p">})</span></code></pre></figure>
-
<h3 id="affix-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
</div><!-- /.table-responsive -->
</div>
-
</div>
<div class="col-md-3" role="complementary">
</ul>
</li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
-
-
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-
<!-- Documentation extras -->
<link href="/docs/3.4/assets/css/docs.min.css" rel="stylesheet">
Bootstrap 3 has reached end of life. <a href="https://getbootstrap.com/migration/">Upgrade to the latest</a> or consider <a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3_eol" rel="noopener" target="_blank">Never-Ending Support</a> for your project
</div>
-
<header class="navbar navbar-static-top bs-docs-nav" id="top">
<div class="container">
<div class="navbar-header">
<ul class="dropdown-menu">
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
- <li class="divider"></li>
+
<li class="active"><a href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
</ul>
</li>
- <li><a href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes')">Themes</a></li>
+
<li><a href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</div>
</header>
-
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>Migrating to v3.x</h1>
<a href="#notes">Additional notes</a>
</li>
-
</ul>
<a class="back-to-top" href="#top">
Back to top
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/3.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
-
<script src="/docs/3.4/dist/js/bootstrap.min.js"></script>
-
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-
-
<script src="/docs/3.4/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</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">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
-
<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/docs/4.0/assets/brand/bootstrap-social-logo.png">
-
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/history/">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
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 src="/docs/4.0/assets/js/vendor/popper.min.js"></script>
-
<script src="/docs/4.0/dist/js/bootstrap.min.js"></script>
-
-
<script src="/docs/4.0/assets/js/docs.min.js"></script>
-
<script src="/docs/4.0/assets/js/ie-emulation-modes-warning.js"></script>
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script>
docsearch({
});
</script>
-
<script>
Holder.addTheme('gray', {
bg: '#777',
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
-
<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/docs/4.0/assets/brand/bootstrap-social-logo.png">
-
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/team/">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
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 class="active bd-sidenav-active">
<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">Team</h1>
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
<script src="/docs/4.0/assets/js/vendor/popper.min.js"></script>
-
<script src="/docs/4.0/dist/js/bootstrap.min.js"></script>
-
-
<script src="/docs/4.0/assets/js/docs.min.js"></script>
-
<script src="/docs/4.0/assets/js/ie-emulation-modes-warning.js"></script>
-
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script>
docsearch({
});
</script>
-
<script>
Holder.addTheme('gray', {
bg: '#777',
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Wall of browser bugs</h1>
<p class="bd-lead"></p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</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">Alerts</h1>
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Cards</h1>
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Carousel</h1>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">Collapse</h1>
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Dropdowns</h1>
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Jumbotron</h1>
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>This is a primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>This is a secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>This is a success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>This is a primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>This is a secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>This is a success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</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">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Pagination</h1>
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</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">Code</h1>
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Figures</h1>
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</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">Typography</h1>
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
</footer>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link active" href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
-
<main id="content" role="main">
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
</div>
</div>
-
-
</main>
</main>
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
</footer>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Icons</h1>
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Extend</h1>
<p class="bd-lead"></p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</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">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</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">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>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</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">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>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</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">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</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">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>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</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">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack 3.</p>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">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>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-circle"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-0"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Clearfix</h1>
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Close icon</h1>
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</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">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>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">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>
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</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">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>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Float</h1>
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
</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>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</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">Position</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</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">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Screenreaders</h1>
<p class="bd-lead">Use screenreader utilities to hide elements on all devices except screen readers.</p>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mh-100"</span> <span class="na">style=</span><span class="s">"width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);"</span><span class="nt">></span>Max-height 100%<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
Centered element
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</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">Text</h1>
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-light"</span><span class="nt">></span>Light weight text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-italic"</span><span class="nt">></span>Italic text.<span class="nt"></p></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Vertical alignment</h1>
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></div>
-
</main>
</div>
</div>
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.0/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Visibility</h1>
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</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">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Wall of browser bugs</h1>
<p class="bd-lead"></p>
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>
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</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>
<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://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://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://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://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>
<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://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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</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">Alerts</h1>
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Cards</h1>
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Carousel</h1>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Collapse</h1>
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Dropdowns</h1>
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Jumbotron</h1>
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</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">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Pagination</h1>
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</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">Code</h1>
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Figures</h1>
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</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">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>
<div class="bd-example">
-
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</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">Typography</h1>
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
</footer>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="/docs/4.1/assets/css/docs.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link active" href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
</div>
</div>
-
-
</main>
-
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
</footer>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Icons</h1>
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Extend</h1>
<p class="bd-lead"></p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</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">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</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">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>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</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">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>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</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">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
<ul>
<li>Alerts for dismissing</li>
<li>Buttons for toggling states and checkbox/radio functionality</li>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</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">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>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</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">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack 3.</p>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">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>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-circle"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-0"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Clearfix</h1>
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Close icon</h1>
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</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">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>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">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>
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</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">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>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Float</h1>
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<p>The <code class="highlighter-rouge">text-hide()</code> class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.</p>
</div>
<figure 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.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</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">Position</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</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">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Screenreaders</h1>
<p class="bd-lead">Use screenreader utilities to hide elements on all devices except screen readers.</p>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Shadows</h1>
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mh-100"</span> <span class="na">style=</span><span class="s">"width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);"</span><span class="nt">></span>Max-height 100%<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
Centered element
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</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">Text</h1>
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-monospace"</span><span class="nt">></span>This is in monospace<span class="nt"></p></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Vertical alignment</h1>
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
-
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
<li class="nav-item">
<a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Visibility</h1>
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</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">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Team</h1>
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Wall of browser bugs</h1>
<p class="bd-lead"></p>
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>
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</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>
<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://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://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://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://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>
<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://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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</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">Alerts</h1>
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Cards</h1>
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Carousel</h1>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Collapse</h1>
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Dropdowns</h1>
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLangHTML"</span> <span class="na">data-browse=</span><span class="s">"Bestand kiezen"</span><span class="nt">></span>Voeg je document toe<span class="nt"></label></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Jumbotron</h1>
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">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>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</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">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Pagination</h1>
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Spinners</h1>
<p class="bd-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p>
Loading...
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Toasts</h1>
<p class="bd-lead">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</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">Code</h1>
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Figures</h1>
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</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">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>
<div class="bd-example">
-
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</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">Typography</h1>
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Documentation extras -->
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link active" href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer-navbar.png,
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/jumbotron.png,
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-bottom.png,
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/offcanvas.png,
</div>
</div>
-
-
</main>
-
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Icons</h1>
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</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">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</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">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>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</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">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>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</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">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
<ul>
<li>Alerts for dismissing</li>
<li>Buttons for toggling states and checkbox/radio functionality</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</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">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>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</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">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack.</p>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-pill"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-0"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Clearfix</h1>
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Close icon</h1>
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</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">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>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">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>
<span class="p">(</span><span class="m">1</span> <span class="m">1</span><span class="p">)</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Float</h1>
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<figure 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('..');"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Overflow</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</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">Position</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</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">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</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">Screenreaders</h1>
<p class="bd-lead">Use screenreader utilities to hide elements on all devices except screen readers.</p>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Shadows</h1>
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
</ul>
</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">Sizing</h1>
<p class="bd-lead">Easily make an element as wide or as tall with our width and height utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vw-100"</span><span class="nt">></span>Width 100vw<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh-100"</span><span class="nt">></span>Height 100vh<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col py-3 px-md-5 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</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">Text</h1>
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Vertical alignment</h1>
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Visibility</h1>
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</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">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Team</h1>
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Wall of browser bugs</h1>
<p class="bd-lead"></p>
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>
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</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>
<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://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://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://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://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>
<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://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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</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">Alerts</h1>
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Cards</h1>
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Carousel</h1>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">Collapse</h1>
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Dropdowns</h1>
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLangHTML"</span> <span class="na">data-browse=</span><span class="s">"Bestand kiezen"</span><span class="nt">></span>Voeg je document toe<span class="nt"></label></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Jumbotron</h1>
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</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">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>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</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">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>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</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">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Pagination</h1>
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">Spinners</h1>
<p class="bd-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p>
Loading...
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Toasts</h1>
<p class="bd-lead">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</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">Code</h1>
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Figures</h1>
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</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">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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</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">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>
<div class="bd-example">
-
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</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">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>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</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">Typography</h1>
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Documentation extras -->
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link active" href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer-navbar.png,
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/jumbotron.png,
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-bottom.png,
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/offcanvas.png,
</div>
</div>
-
-
</main>
-
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Icons</h1>
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</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">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</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">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>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</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">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>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</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">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
<ul>
<li>Alerts for dismissing</li>
<li>Buttons for toggling states and checkbox/radio functionality</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</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">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>
<span class="p">}</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</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">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>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</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">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack.</p>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</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">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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-sm"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-lg"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Clearfix</h1>
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Close icon</h1>
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</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">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>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</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">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>
<span class="p">(</span><span class="m">1</span> <span class="m">1</span><span class="p">)</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</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">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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</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">Float</h1>
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<figure 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('...');"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Overflow</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</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">Position</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</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">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Screen readers</h1>
<p class="bd-lead">Use screen reader utilities to hide elements on all devices except screen readers.</p>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Shadows</h1>
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
</ul>
</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">Sizing</h1>
<p class="bd-lead">Easily make an element as wide or as tall with our width and height utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vw-100"</span><span class="nt">></span>Width 100vw<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh-100"</span><span class="nt">></span>Height 100vh<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</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">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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col px-md-5"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"p-3 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Stretched link</h1>
<p class="bd-lead">Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</div>
-
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</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">Text</h1>
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Vertical alignment</h1>
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
</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">Visibility</h1>
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
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>
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</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>
<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://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://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://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://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>
<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://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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="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>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="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>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLangHTML"</span> <span class="na">data-browse=</span><span class="s">"Bestand kiezen"</span><span class="nt">></span>Voeg je document toe<span class="nt"></label></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="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>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spinners</h1>
<p class="bd-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p>
Loading...
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Toasts</h1>
<p class="bd-lead">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</nav>
-
<main class="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>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</nav>
-
<main class="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>
<div class="bd-example">
-
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</nav>
-
<main class="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>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</nav>
-
<main class="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>
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Documentation extras -->
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sticky-footer-navbar.png,
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/jumbotron.png,
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-bottom.png,
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/offcanvas.png,
</div>
</div>
-
-
</main>
-
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</nav>
-
<main class="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>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</nav>
-
<main class="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>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell"><span class="nf">Install-Package</span><span class="w"> </span><span class="nx">bootstrap.sass</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</nav>
-
<main class="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 jsDelivr and a template starter page.</p>
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
<ul>
<li>Alerts for dismissing</li>
<li>Buttons for toggling states and checkbox/radio functionality</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</nav>
-
<main class="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>
<span class="p">}</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</nav>
-
<main class="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>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</nav>
-
<main class="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.</p>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</nav>
-
<main class="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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-sm"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-lg"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</nav>
-
<main class="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>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="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>
<span class="p">(</span><span class="m">1</span> <span class="m">1</span><span class="p">)</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<figure 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('...');"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overflow</h1>
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</nav>
-
<main class="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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screen readers</h1>
<p class="bd-lead">Use screen reader utilities to hide elements on all devices except screen readers.</p>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Shadows</h1>
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
</ul>
</nav>
-
<main class="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 with our width and height utilities.</p>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vw-100"</span><span class="nt">></span>Width 100vw<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh-100"</span><span class="nt">></span>Height 100vh<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="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>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col px-md-5"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"p-3 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Stretched link</h1>
<p class="bd-lead">Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.</p>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</nav>
-
<main class="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>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.4/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
-
<div class="d-block px-3 py-2 text-center text-bold swatch-purple">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.4/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="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>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/about/brand.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/about/license.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/about/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/about/team.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/about/translations.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/browser-bugs.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<p class="bd-lead"></p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-danger">
<h5 id="outdated-content">Outdated content</h5>
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>
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</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>
<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://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://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://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://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>
<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://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>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/alerts.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/badge.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/breadcrumb.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/button-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
...
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/card.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/carousel.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/collapse.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/dropdowns.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/forms.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLangHTML"</span> <span class="na">data-browse=</span><span class="s">"Bestand kiezen"</span><span class="nt">></span>Voeg je document toe<span class="nt"></label></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/input-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/jumbotron.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/list-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/media-object.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/modal.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/navbar.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></nav></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/navs.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/pagination.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/popovers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/progress.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 75%"</span><span class="nt">></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/scrollspy.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/spinners.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
Loading...
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/toasts.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/components/tooltips.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="c1">// do something...</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/code.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/figures.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">></span>A caption for the above image.<span class="nt"></figcaption></span>
<span class="nt"></figure></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/images.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"></picture></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/reboot.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<div class="bd-example">
-
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/tables.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<td>Cell</td>
</tr>
-
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="nt"></table></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/content/typography.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</a>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Documentation extras -->
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sticky-footer-navbar.png,
</div>
</div>
-
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/jumbotron.png,
</div>
</div>
-
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-bottom.png,
</div>
</div>
-
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/offcanvas.png,
</div>
</div>
-
-
<hr class="my-5">
<div class="container">
</svg>
</div>
- <h2>Go further with Bootstrap Themes</h2>
- <p class="col-md-10 mx-auto lead font-weight-normal">
- Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
- </p>
- <a href="https://themes.getbootstrap.com" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
- </div>
+ </div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/4.5/assets/img/bootstrap-themes-collage.png,
/docs/4.5/assets/img/bootstrap-themes-collage@2x.png 2x"
src="/docs/4.5/assets/img/bootstrap-themes-collage.png"
</main>
-
-
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/extend/approach.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/extend/icons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/accessibility.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/best-practices.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/browsers-devices.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/build-tools.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="language-plaintext highlighter-rouge">npm install</code>.</p>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/contents.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/download.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell"><span class="nf">Install-Package</span><span class="w"> </span><span class="nx">bootstrap.sass</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/introduction.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
<ul>
<li>Alerts for dismissing</li>
<li>Buttons for toggling states and checkbox/radio functionality</li>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/javascript.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="p">}</span>
<span class="p">})</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/theming.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<div class="row">
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
</div>
<p>Here’s how you can use these in your Sass:</p>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/getting-started/webpack.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/layout/grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/layout/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/layout/utilities-for-layout.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/migration.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/borders.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-sm"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-lg"</span><span class="nt">></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/clearfix.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<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-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/close-icon.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
<span class="nt"></button></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/colors.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-info">
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/display.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/embed.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="p">(</span><span class="m">1</span> <span class="m">1</span><span class="p">)</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/flex.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/float.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/image-replacement.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<figure 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('...');"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/interactions.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/overflow.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/position.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/screen-readers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/shadows.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/sizing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vw-100"</span><span class="nt">></span>Width 100vw<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh-100"</span><span class="nt">></span>Height 100vh<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/spacing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col px-md-5"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"p-3 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/stretched-link.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
</ul>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/text.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/vertical-align.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
-
</main>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</div>
-
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4.5.3/site/docs/4.5/utilities/visibility.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
-
</main>
</div>
</div>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/about/brand/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/about/license/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/about/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/about/team/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/about/translations/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/browser-bugs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</tr>
</tbody>
</table>
-
</main>
</div>
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/alerts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/badge/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/breadcrumb/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/button-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/buttons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/card/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/carousel/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/collapse/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/dropdowns/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/forms/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/input-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/jumbotron/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/list-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/media-object/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/modal/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/navbar/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/navs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/pagination/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/popovers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/progress/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/scrollspy/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/spinners/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/toasts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/tooltips/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/code/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/figures/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/images/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/reboot/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/tables/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p>Use <code>.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
-
-
-
<div class="bd-example">
<div class="table-responsive-sm">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-md">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-lg">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xl">
<table class="table">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/typography/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/end-of-life/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
</footer>
</main>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<p class="mt-5 mb-3 text-muted text-center">© 2017-2024</p>
</form>
-
</body>
</html>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="container-xl themed-container">.container-xl</div>
<div class="container-fluid themed-container">.container-fluid</div>
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
-
<hr class="my-5">
</svg>
</div>
- <h2>Go further with Bootstrap Themes</h2>
- <p class="col-md-10 mx-auto lead font-weight-normal">
- Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
- </p>
- <a href="https://themes.getbootstrap.com/" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
- </div>
+ </div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/4.6/assets/img/bootstrap-themes-collage.png,
/docs/4.6/assets/img/bootstrap-themes-collage@2x.png 2x"
src="/docs/4.6/assets/img/bootstrap-themes-collage.png"
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
-
-
<script src="/docs/4.6/assets/js/docs.min.js"></script>
</body>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<p>© Company 2017-2024</p>
</footer>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</nav>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</main>
</div>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<p class="mt-5 mb-3 text-muted">© 2017-2024</p>
</form>
-
</body>
</html>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</main><!-- /.container -->
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/extend/approach/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/extend/icons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/accessibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/best-practices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/browsers-devices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/build-tools/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/contents/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/download/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/javascript/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/theming/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/webpack/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/layout/grid/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/layout/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/layout/utilities-for-layout/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/migration/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/borders/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/clearfix/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/close-icon/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/colors/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<li><code>.bg-gradient-dark</code></li>
</ul>
-
</main>
</div>
</div>
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/display/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/embed/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/flex/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<li><code>.align-content-xl-stretch</code></li>
</ul>
-
</main>
</div>
</div>
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/float/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<li><code>.float-xl-none</code></li>
</ul>
-
</main>
</div>
</div>
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/image-replacement/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/interactions/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/overflow/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/position/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/screen-readers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/shadows/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/sizing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/spacing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/stretched-link/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/text/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
</ul>
</nav>
</nav>
-
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/vertical-align/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/utilities/visibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy overflow-hidden">
</div>
</div>
-
<div class="d-block p-3 text-center text-bold bd-announcement">
Bootstrap 4 has reached end of life.
<a href="https://getbootstrap.com/migration/">Upgrade to the latest</a>
for your project.
</div>
-
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item">
- <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a>
</header>
-
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/4.6/assets/js/docs.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/brand/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<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.</p>
<h2 id="logo">Logo</h2>
<p>When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects. <strong>Do not use the Twitter name or logo</strong> in association with Bootstrap.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/license/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2 id="it-requires-you-to">It requires you to:</h2>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<h2 id="team">Team</h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<h2 id="history">History</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/team/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<div class="list-group mb-3">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/translations/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/accordion/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The accordion uses <a href="/docs/5.0/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/alerts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/badge/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<h3 id="headings">Headings</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/breadcrumb/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/button-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/buttons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/card/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
<h2 id="example">Example</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/carousel/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/close-button/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/collapse/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/dropdowns/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/list-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/navbar/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/navs-tabs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="base-nav">Base nav</h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<p>The base <code>.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/offcanvas/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/pagination/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code>aria-label</code> for the <code><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/popovers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Things to know when using the popover plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/progress/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/scrollspy/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Scrollspy has a few requirements to function properly:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/spinners/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
<p>For accessibility purposes, each loader here includes <code>role="status"</code> and a nested <code><span class="visually-hidden">Loading...</span></code>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/toasts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
<h2 id="overview">Overview</h2>
<p>Things to know when using the toast plugin:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/tooltips/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Things to know when using the tooltip plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/figures/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/images/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="responsive-images">Responsive images</h2>
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent element.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/reboot/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="approach">Approach</h2>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/tables/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
<p>Using the most basic table markup, here’s how <code>.table</code>-based tables look in Bootstrap.</p>
</tr>
</tbody>
-
</table>
</div>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm"</span><span class="p">></span>
<p>Use <code>.table-responsive{-sm|-md|-lg|-xl|-xxl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
-
-
<div class="bd-example">
<div class="table-responsive">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-sm">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-md">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-lg">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xl">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xxl">
<table class="table">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/typography/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="global-settings">Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.0/utilities/text/">textual utility classes</a>.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/color/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/components/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<p>To build our modifier classes, we use Sass’s <code>@each</code> loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our <code>$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
<strong>This is a danger callout.</strong> Example text to show it in action.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/css-variables/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
<h2 id="root-variables">Root variables</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/optimize/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Configuration
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/options/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<table class="table text-start">
</tbody>
</table>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
<p>Our two preferred methods are:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/customize/sass/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
</footer>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
</footer>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="../cheatsheet/cheatsheet.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="cheatsheet.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="../checkout/form-validation.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="form-validation.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="container-fluid themed-container">.container-fluid</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider mb-0"></div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/heroes.png,
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/features.png,
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sidebars.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/jumbotron.png,
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet.png,
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet-rtl.png,
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/offcanvas-navbar.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout-rtl.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel-rtl.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog-rtl.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard-rtl.png,
</div>
</div>
-
-
-
<hr class="my-5">
<div class="container">
<div class="text-center">
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
- Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
- </p>
- <a href="https://themes.getbootstrap.com/" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+ </p>
+
</div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/5.0/assets/img/bootstrap-themes-collage.png,
/docs/5.0/assets/img/bootstrap-themes-collage@2x.png 2x"
</div>
</main>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
-
-
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</nav>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</ul>
</div>
</li>
- <li class="border-top my-3"></li>
+
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
Account
<div class="b-example-divider"></div>
</main>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="sidebars.js"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</form>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/extend/approach/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>—we’d love to discuss it with you.</p>
<h2 id="summary">Summary</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/extend/icons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.</p>
<p>While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<h2 id="bootstrap-icons">Bootstrap Icons</h2>
<li><a href="https://icons.coreui.io/">CoreUI Icons</a></li>
</ul>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/checks-radios/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>Structurally, our <code><input></code>s and <code><label></code>s are sibling elements as opposed to an <code><input></code> within a <code><label></code>. This is slightly more verbose as you must specify <code>id</code> and <code>for</code> attributes to relate the <code><input></code> and <code><label></code>. We use the sibling selector (<code>~</code>) for all our <code><input></code> states, like <code>:checked</code> or <code>:disabled</code>. When combined with the <code>.form-check-label</code> class, we can easily style the text for each item based on the <code><input></code>’s state.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/form-control/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<div class="bd-example">
<div class="mb-3">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/input-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code><label></code>s outside the input group.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/layout/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code><form></code> element. Bootstrap provides no default styling for the <code><form></code> element, but there are some powerful browser features that are provided by default.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview</h2>
<p>Bootstrap’s form controls expand on <a href="/docs/5.0/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
<p>Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g., <code>email</code> for email address or <code>number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/range/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Create custom <code><input type="range"></code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/select/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="default">Default</h2>
<p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/forms/validation/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
<script async src="/docs/5.0/assets/js/validate-forms.js"></script>
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/accessibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<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>
<h2 id="overview-and-limitations">Overview and limitations</h2>
<p>The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill <a href="https://www.w3.org/TR/WCAG/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/">Section 508</a>, and similar accessibility standards and requirements.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/best-practices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> This copy is a work in progress.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="supported-browsers">Supported browsers</h2>
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/build-tools/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="tooling-setup">Tooling setup</h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v5.0.2/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/contents/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/download/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.0.2</strong> to easily drop into your project, which includes:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/introduction/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="quick-start">Quick start</h2>
<p>Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? <a href="/docs/5.0/getting-started/download/">Head to the downloads page</a>.</p>
<h3 id="css">CSS</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/javascript/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="individual-or-compiled">Individual or compiled</h2>
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
<p>If you use a bundler (Webpack, Rollup…), you can use <code>/js/dist/*.js</code> files which are UMD ready.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/parcel/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="install-parcel">Install Parcel</h2>
<p>Install <a href="https://en.parceljs.org/getting_started.html">Parcel Bundler</a>.</p>
<h2 id="install-bootstrap">Install Bootstrap</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/rfs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="what-is-rfs">What is RFS?</h2>
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.3">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
<p>The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="get-familiar">Get familiar</h2>
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.0/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
<p>You may also want to read up on <a href="https://rtlcss.com/">the RTLCSS project</a>, as it powers our approach to RTL.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/getting-started/webpack/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
<p><a href="/docs/5.0/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
<h2 id="importing-javascript">Importing JavaScript</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/clearfix/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"clearfix"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/colored-links/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.0/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example">
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/position/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="fixed-top">Fixed top</h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fixed-top"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/ratio/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code><iframe></code>s, <code><embed></code>s, <code><video></code>s, and <code><object></code>s. These helpers also can be used on any standard HTML child element (e.g., a <code><div></code> or <code><img></code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
<p>Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows <a href="#custom-ratios">custom aspect ratios</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/stretched-link/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code>position</code> and <code>z-index</code> styles can help should this be required.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/text-truncation/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example">
<!-- Block level -->
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/helpers/visually-hidden/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example">
<h2 class="visually-hidden">Title for screen readers</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/breakpoints/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="core-concepts">Core concepts</h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/columns/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> Be sure to <a href="/docs/5.0/layout/grid/">read the Grid page</a> first before diving into how to modify and customize your grid columns.
</div>
<div class="clearfix">
<svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive floated image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive floated image</text></svg>
-
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/containers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-they-work">How they work</h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<p>Bootstrap comes with three different containers:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/grid/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/gutters/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-they-work">How they work</h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/utilities/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="changing-display">Changing <code>display</code></h2>
<p>Use our <a href="/docs/5.0/utilities/display/">display utilities</a> for responsively toggling common values of the <code>display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<h2 id="flexbox-options">Flexbox options</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/layout/z-index/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code>100</code>+ or <code>500</code>+.</p>
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/migration/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded active" aria-current="page">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="dependencies">Dependencies</h2>
<ul>
<li>Dropped jQuery.</li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/api/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
<table class="table text-start">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/background/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="background-color">Background color</h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.0/utilities/colors/">color utilities</a>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/borders/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="border">Border</h2>
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
<h3 id="additive">Additive</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/colors/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="colors">Colors</h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.0/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/display/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
<h2 id="notation">Notation</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/flex/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/float/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/interactions/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<h2 id="text-selection">Text selection</h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/overflow/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/position/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="position-values">Position values</h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-static"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/shadows/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/sizing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="relative-to-the-parent">Relative to the parent</h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/spacing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
<p>Using the CSS Grid layout module? Consider using <a href="#gap">the gap utility</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/text/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="text-alignment">Text alignment</h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/vertical-align/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
<p>To vertically center non-inline content (like <code><div></code>s and more), use our <a href="/docs/5.0/utilities/flex/#align-items">flex box utilities</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/utilities/visibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
Elements with the <code>.invisible</code> class will be hidden <em>both</em> visually and for assistive technology/screen reader users.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/about/brand/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<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.</p>
<h2 id="logo">Logo</h2>
<p>When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects. <strong>Do not use the Twitter name or logo</strong> in association with Bootstrap.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/about/license/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2 id="it-requires-you-to">It requires you to:</h2>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/about/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<h2 id="team">Team</h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<h2 id="history">History</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/about/team/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<div class="list-group mb-3">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/about/translations/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/accordion/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The accordion uses <a href="/docs/5.1/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/alerts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/badge/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<h3 id="headings">Headings</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/breadcrumb/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/button-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/buttons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/card/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
<h2 id="example">Example</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/carousel/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/close-button/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/collapse/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/dropdowns/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/list-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/modal/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/navbar/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/navs-tabs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="base-nav">Base nav</h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<p>The base <code>.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/offcanvas/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/pagination/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code>aria-label</code> for the <code><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/placeholders/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.</p>
<h2 id="example">Example</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/popovers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Things to know when using the popover plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/progress/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/scrollspy/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Scrollspy has a few requirements to function properly:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/spinners/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
<p>For accessibility purposes, each loader here includes <code>role="status"</code> and a nested <code><span class="visually-hidden">Loading...</span></code>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/toasts/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
<h2 id="overview">Overview</h2>
<p>Things to know when using the toast plugin:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/tooltips/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Things to know when using the tooltip plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/figures/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/images/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="responsive-images">Responsive images</h2>
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent width.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/reboot/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="approach">Approach</h2>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/tables/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
<p>Using the most basic table markup, here’s how <code>.table</code>-based tables look in Bootstrap.</p>
</tr>
</tbody>
-
</table>
</div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm"</span><span class="p">></span>
<p>Use <code>.table-responsive{-sm|-md|-lg|-xl|-xxl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
-
-
<div class="bd-example">
<div class="table-responsive">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-sm">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-md">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-lg">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xl">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xxl">
<table class="table">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/typography/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="global-settings">Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.1/utilities/text/">textual utility classes</a>.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/color/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/components/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<p>To build our modifier classes, we use Sass’s <code>@each</code> loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our <code>$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
<strong>This is a danger callout.</strong> Example text to show it in action.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/css-variables/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap includes many <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
<h2 id="root-variables">Root variables</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/optimize/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Configuration
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/options/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<table class="table text-start">
</tbody>
</table>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
<p>Our two preferred methods are:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/customize/sass/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
</footer>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
</footer>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="../cheatsheet/cheatsheet.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="cheatsheet.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="../checkout/form-validation.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="form-validation.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
-
<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
<div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
<form class="p-2 mb-2 bg-light border-bottom">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
-
<div class="container">
<footer class="py-5">
<div class="row">
</footer>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="container-fluid themed-container">.container-fluid</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider mb-0"></div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/heroes.png,
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/features.png,
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sidebars.png,
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/footers.png,
<p class="text-muted">Finish every page strong with an awesome footer, big or small.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dropdowns.png,
<p class="text-muted">Enhance your dropdowns with filters, icons, custom styles, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/list-groups.png,
<p class="text-muted">Extend list groups with utilities and custom styles for any content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/modals.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/jumbotron.png,
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet.png,
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet-rtl.png,
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/offcanvas-navbar.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout-rtl.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel-rtl.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog-rtl.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard-rtl.png,
</div>
</div>
-
-
-
<hr class="my-5">
<div class="container">
<div class="text-center">
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
- Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
- </p>
- <a href="https://themes.getbootstrap.com/" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+ </p>
+
</div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/5.1/assets/img/bootstrap-themes-collage.png,
/docs/5.1/assets/img/bootstrap-themes-collage@2x.png 2x"
</div>
</main>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
-
-
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</nav>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</ul>
</div>
</li>
- <li class="border-top my-3"></li>
+
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
Account
<div class="b-example-divider"></div>
</main>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="sidebars.js"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</form>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/extend/approach/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>—we’d love to discuss it with you.</p>
<h2 id="summary">Summary</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/extend/icons/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.</p>
<p>While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<h2 id="bootstrap-icons">Bootstrap Icons</h2>
<li><a href="https://primer.style/octicons/">Octicons</a></li>
</ul>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/checks-radios/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>Structurally, our <code><input></code>s and <code><label></code>s are sibling elements as opposed to an <code><input></code> within a <code><label></code>. This is slightly more verbose as you must specify <code>id</code> and <code>for</code> attributes to relate the <code><input></code> and <code><label></code>. We use the sibling selector (<code>~</code>) for all our <code><input></code> states, like <code>:checked</code> or <code>:disabled</code>. When combined with the <code>.form-check-label</code> class, we can easily style the text for each item based on the <code><input></code>’s state.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/floating-labels/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/form-control/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<div class="bd-example">
<div class="mb-3">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/input-group/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code><label></code>s outside the input group.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/layout/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code><form></code> element. Bootstrap provides no default styling for the <code><form></code> element, but there are some powerful browser features that are provided by default.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/overview/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview</h2>
<p>Bootstrap’s form controls expand on <a href="/docs/5.1/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
<p>Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g., <code>email</code> for email address or <code>number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/range/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>Create custom <code><input type="range"></code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/select/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="default">Default</h2>
<p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/validation/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
<script async src="/docs/5.1/assets/js/validate-forms.js"></script>
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/accessibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<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>
<h2 id="overview-and-limitations">Overview and limitations</h2>
<p>The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill <a href="https://www.w3.org/TR/WCAG/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/">Section 508</a>, and similar accessibility standards and requirements.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/best-practices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<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>
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> This copy is a work in progress.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/browsers-devices/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="supported-browsers">Supported browsers</h2>
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/contents/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/contribute/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="tooling-setup">Tooling setup</h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> to build the documentation and compile source files. Our <a href="https://github.com/twbs/bootstrap/blob/v5.1.3/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.</p>
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/download/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.1.3</strong> to easily drop into your project, which includes:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="quick-start">Quick start</h2>
<p>Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? <a href="/docs/5.1/getting-started/download/">Head to the downloads page</a>.</p>
<h3 id="css">CSS</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/javascript/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="individual-or-compiled">Individual or compiled</h2>
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
<p>If you use a bundler (Webpack, Rollup…), you can use <code>/js/dist/*.js</code> files which are UMD ready.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/parcel/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="install-parcel">Install Parcel</h2>
<p>Install <a href="https://en.parceljs.org/getting_started.html">Parcel Bundler</a>.</p>
<h2 id="install-bootstrap">Install Bootstrap</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/rfs/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="what-is-rfs">What is RFS?</h2>
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.6">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
<p>The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/rtl/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="get-familiar">Get familiar</h2>
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.1/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
<p>You may also want to read up on <a href="https://rtlcss.com/">the RTLCSS project</a>, as it powers our approach to RTL.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/webpack/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
<p><a href="/docs/5.1/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
<h2 id="importing-javascript">Importing JavaScript</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/clearfix/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"clearfix"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/colored-links/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.1/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example">
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/position/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="fixed-top">Fixed top</h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fixed-top"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/ratio/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="about">About</h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code><iframe></code>s, <code><embed></code>s, <code><video></code>s, and <code><object></code>s. These helpers also can be used on any standard HTML child element (e.g., a <code><div></code> or <code><img></code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
<p>Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows <a href="#custom-ratios">custom aspect ratios</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/stacks/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source <a href="https://almonk.github.io/pylon/">Pylon project</a>.</p>
<div class="bd-callout bd-callout-warning">
Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. <a href="https://caniuse.com/flexbox-gap">Read more</a>.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/stretched-link/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code>position</code> and <code>z-index</code> styles can help should this be required.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/text-truncation/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example">
<!-- Block level -->
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/vertical-rule/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Vertical rules are inspired by the <code><hr></code> element, allowing you to create vertical dividers in common layouts. They’re styled just like <code><hr></code> elements:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/helpers/visually-hidden/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example">
<h2 class="visually-hidden">Title for screen readers</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/breakpoints/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="core-concepts">Core concepts</h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/columns/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> Be sure to <a href="/docs/5.1/layout/grid/">read the Grid page</a> first before diving into how to modify and customize your grid columns.
</div>
<div class="clearfix">
<svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive floated image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive floated image</text></svg>
-
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/containers/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-they-work">How they work</h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<p>Bootstrap comes with three different containers:</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/css-grid/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.</p>
<div class="bd-callout bd-callout-warning">
<strong>Heads up—our CSS Grid system is experimental and opt-in as of v5.1.0!</strong> We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/grid/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="example">Example</h2>
<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/gutters/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-they-work">How they work</h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/utilities/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="changing-display">Changing <code>display</code></h2>
<p>Use our <a href="/docs/5.1/utilities/display/">display utilities</a> for responsively toggling common values of the <code>display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<h2 id="flexbox-options">Flexbox options</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/layout/z-index/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code>100</code>+ or <code>500</code>+.</p>
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/migration/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded active" aria-current="page">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="dependencies">Dependencies</h2>
<ul>
<li>Dropped jQuery.</li>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/api/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
<table class="table text-start">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/background/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="background-color">Background color</h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.1/utilities/colors/">color utilities</a>.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/borders/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="border">Border</h2>
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
<h3 id="additive">Additive</h3>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/colors/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="colors">Colors</h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.1/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/display/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="how-it-works">How it works</h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
<h2 id="notation">Notation</h2>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/flex/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/float/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="overview">Overview</h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/interactions/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<h2 id="text-selection">Text selection</h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/opacity/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>The <code>opacity</code> property sets the opacity level for an element. The opacity level describes the transparency level, where <code>1</code> is not transparent at all, <code>.5</code> is 50% visible, and <code>0</code> is completely transparent.</p>
<p>Set the <code>opacity</code> of an element using <code>.opacity-{value}</code> utilities.</p>
<div class="bd-example d-sm-flex">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/overflow/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/position/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="position-values">Position values</h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-static"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/shadows/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="examples">Examples</h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/sizing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="relative-to-the-parent">Relative to the parent</h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/spacing/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
<p>Using the CSS Grid layout module? Consider using <a href="#gap">the gap utility</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/text/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</nav>
</div>
-
<div class="bd-content ps-lg-4">
-
<h2 id="text-alignment">Text alignment</h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
<div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/vertical-align/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
<p>To vertically center non-inline content (like <code><div></code>s and more), use our <a href="/docs/5.1/utilities/flex/#align-items">flex box utilities</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/utilities/visibility/">
-
-
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</div>
</div>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</nav>
</header>
-
-
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</ul>
</div>
-
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
</div>
</nav>
-
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
</ul>
</div>
</li>
- <li class="my-3 mx-4 border-top"></li>
+
<li>
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
Migration
</div>
-
-
<div class="bd-content ps-lg-4">
-
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
Elements with the <code>.invisible</code> class will be hidden <em>both</em> visually and for assistive technology/screen reader users.
</main>
</div>
-
<footer class="bd-footer py-5 mt-5 bg-light">
<div class="container py-5">
<div class="row">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/5.1/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/about/brand/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<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.</p>
<h2 id="logo">Logo <a class="anchor-link" href="#logo" aria-label="Link to this section: Logo"></a></h2>
<p>When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects. <strong>Do not use the Twitter name or logo</strong> in association with Bootstrap.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/about/license/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Bootstrap is released under the MIT license and is copyright 2022 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2 id="it-requires-you-to">It requires you to: <a class="anchor-link" href="#it-requires-you-to" aria-label="Link to this section: It requires you to:"></a></h2>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/about/overview/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<h2 id="team">Team <a class="anchor-link" href="#team" aria-label="Link to this section: Team"></a></h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<h2 id="history">History <a class="anchor-link" href="#history" aria-label="Link to this section: History"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/about/team/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<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>
<div class="list-group mb-3">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/about/translations/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded active" aria-current="page">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<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>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/accordion/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>The accordion uses <a href="/docs/5.2/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/alerts/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/badge/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<h3 id="headings">Headings <a class="anchor-link" href="#headings" aria-label="Link to this section: Headings"></a></h3>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/breadcrumb/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/button-group/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="basic-example">Basic example <a class="anchor-link" href="#basic-example" aria-label="Link to this section: Basic example"></a></h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span> <span class="na">for</span><span class="o">=</span><span class="s">"vbtn-radio3"</span><span class="p">></span>Radio 3<span class="p"></</span><span class="nt">label</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/buttons/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/card/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/carousel/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/close-button/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/collapse/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/dropdowns/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/list-group/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="basic-example">Basic example <a class="anchor-link" href="#basic-example" aria-label="Link to this section: Basic example"></a></h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/modal/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/navbar/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/navs-tabs/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="base-nav">Base nav <a class="anchor-link" href="#base-nav" aria-label="Link to this section: Base nav"></a></h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<p>The base <code>.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/offcanvas/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/pagination/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code>aria-label</code> for the <code><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/placeholders/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
<p>Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.</p>
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/popovers/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Things to know when using the popover plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/progress/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/scrollspy/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Scrollspy toggles the <code>.active</code> class on anchor (<code><a></code>) elements when the element with the <code>id</code> referenced by the anchor’s <code>href</code> is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap <a href="/docs/5.2/components/navs-tabs/">nav component</a> or <a href="/docs/5.2/components/list-group/">list group</a>, but it will also work with any anchor elements in the current page. Here’s how it works.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/spinners/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
<p>For accessibility purposes, each loader here includes <code>role="status"</code> and a nested <code><span class="visually-hidden">Loading...</span></code>.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/toasts/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Things to know when using the toast plugin:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/tooltips/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Things to know when using the tooltip plugin:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/content/figures/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/content/images/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="responsive-images">Responsive images <a class="anchor-link" href="#responsive-images" aria-label="Link to this section: Responsive images"></a></h2>
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent width.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/content/reboot/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/content/tables/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
<p>Using the most basic table markup, here’s how <code>.table</code>-based tables look in Bootstrap.</p>
</tr>
</tbody>
-
</table>
</div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm"</span><span class="p">></span>
<p>Use <code>.table-responsive{-sm|-md|-lg|-xl|-xxl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
-
-
<div class="bd-example">
<div class="table-responsive">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-sm">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-md">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-lg">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xl">
<table class="table">
</div>
</div>
-
<div class="bd-example">
<div class="table-responsive-xxl">
<table class="table">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/content/typography/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="global-settings">Global settings <a class="anchor-link" href="#global-settings" aria-label="Link to this section: Global settings"></a></h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.2/utilities/text/">textual utility classes</a>.</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/color/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="theme-colors">Theme colors <a class="anchor-link" href="#theme-colors" aria-label="Link to this section: Theme colors"></a></h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/components/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="base-classes">Base classes <a class="anchor-link" href="#base-classes" aria-label="Link to this section: Base classes"></a></h2>
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<p>To build our modifier classes, we use Sass’s <code>@each</code> loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our <code>$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
<strong>This is a danger callout.</strong> Example text to show it in action.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/css-variables/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Bootstrap includes many <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
<h2 id="root-variables">Root variables <a class="anchor-link" href="#root-variables" aria-label="Link to this section: Root variables"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/optimize/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="lean-sass-imports">Lean Sass imports <a class="anchor-link" href="#lean-sass-imports" aria-label="Link to this section: Lean Sass imports"></a></h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Configuration
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/options/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="table-responsive"><table class="table table-options">
</tbody>
</table></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/overview/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
<p>Our two preferred methods are:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/customize/sass/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure <a class="anchor-link" href="#file-structure" aria-label="Link to this section: File structure"></a></h2>
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</p>
</footer>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
</footer>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</button>
</div>
-
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
-
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
</div><!-- /.container -->
-
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
</footer>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<p class="display-6">العرض 6</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p class="h1">عنوان 1</p>
<p class="h2">عنوان 2</p>
<p class="h6">عنوان 6</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p class="lead">
هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
<p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
<p><em>هذا السطر يحوي نص مائل.</em></p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<hr>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<blockquote class="blockquote">
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
</blockquote>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-unstyled">
<li>هذه قائمة عناصر.</li>
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-inline">
<li class="list-inline-item">هذا عنصر في قائمة.</li>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-dark table-borderless">
<thead>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-hover">
<thead>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-sm table-bordered">
<thead>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">أحسنت!</h4>
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<span class="badge rounded-pill bg-primary">Primary</span>
<button type="button" class="btn btn-link">رابط</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-primary btn-sm">زر صغير</button>
<button type="button" class="btn btn-primary">زر قياسي</button>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
</div><!-- /btn-group -->
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group">
<div class="dropdown">
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-group list-group-flush">
<li class="list-group-item">عنصر</li>
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav aria-label="مثال قياسي لترقيم الصفحات">
<ul class="pagination">
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav aria-label="مثال آخر لترقيم الصفحات">
<ul class="pagination pagination-lg flex-wrap">
</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
انبثاق إلى الأعلى
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="spinner-grow text-primary" role="status">
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="../cheatsheet/cheatsheet.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<p class="display-6">Display 6</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h6">Heading 6</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><em>This line rendered as italicized text.</em></p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<hr>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-unstyled">
<li>This is a list.</li>
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-dark table-borderless">
<thead>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-hover">
<thead>
</table>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<table class="table table-sm table-bordered">
<thead>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p class="h6">Example heading <span class="badge bg-dark">New</span></p>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<span class="badge rounded-pill bg-primary">Primary</span>
<button type="button" class="btn btn-link">Link</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Standard button</button>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
</div><!-- /btn-group -->
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group">
<div class="dropdown">
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
</ul>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav aria-label="Standard pagination example">
<ul class="pagination">
</nav>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<nav aria-label="Another pagination example">
<ul class="pagination pagination-lg flex-wrap">
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div></div>
-
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="spinner-grow text-primary" role="status">
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="cheatsheet.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="../checkout/form-validation.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="form-validation.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
-
<div class="container">
<footer class="py-5">
<div class="row">
</footer>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="container-fluid themed-container text-center">.container-fluid</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider mb-0"></div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/">
-
-
-
-
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="d-flex">
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<header class="py-5 border-bottom">
<div class="container-xxl bd-gutter pt-md-1 pb-md-4">
<div class="row">
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/heroes.png,
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/features.png,
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sidebars.png,
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/footers.png,
<p class="text-muted">Finish every page strong with an awesome footer, big or small.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dropdowns.png,
<p class="text-muted">Enhance your dropdowns with filters, icons, custom styles, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/list-groups.png,
<p class="text-muted">Extend list groups with utilities and custom styles for any content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/modals.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/pricing.png,
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/product.png,
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cover.png,
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard.png,
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sign-in.png,
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer.png,
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/jumbotron.png,
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/grid.png,
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet.png,
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet-rtl.png,
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbars-offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbars-offcanvas.png,
<p class="text-muted">Same as the Navbars example, but with our offcanvas component.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-static.png,
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-fixed.png,
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/offcanvas-navbar.png,
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout-rtl.png,
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel-rtl.png,
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog-rtl.png,
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard-rtl.png,
</div>
</div>
-
-
-
<hr class="my-5">
<div class="container">
<div class="text-center">
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
- Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
- </p>
- <a href="https://themes.getbootstrap.com/" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+ </p>
+
</div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/5.2/assets/img/bootstrap-themes-collage.png,
/docs/5.2/assets/img/bootstrap-themes-collage@2x.png 2x"
</div>
</main>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
-
-
<script src="/docs/5.2/assets/js/docs.min.js"></script>
-
-
-
-
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
<div class="b-example-divider"></div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</nav>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</ul>
</div>
</li>
- <li class="border-top my-3"></li>
+
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
Account
<div class="b-example-divider b-example-vr"></div>
</main>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="sidebars.js"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</form>
</main>
-
</body>
</html>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</footer>
</div>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
-
<style>
.bd-placeholder-img {
font-size: 1.125rem;
</div>
</footer>
-
</body>
</html>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/extend/approach/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<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>
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new/choose">Open an issue</a>—we’d love to discuss it with you.</p>
<h2 id="summary">Summary <a class="anchor-link" href="#summary" aria-label="Link to this section: Summary"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/extend/icons/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.</p>
<p>While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<h2 id="bootstrap-icons">Bootstrap Icons <a class="anchor-link" href="#bootstrap-icons" aria-label="Link to this section: Bootstrap Icons"></a></h2>
<li><a href="https://tabler-icons.io/">Tabler Icons</a></li>
</ul>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/checks-radios/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>Structurally, our <code><input></code>s and <code><label></code>s are sibling elements as opposed to an <code><input></code> within a <code><label></code>. This is slightly more verbose as you must specify <code>id</code> and <code>for</code> attributes to relate the <code><input></code> and <code><label></code>. We use the sibling selector (<code>~</code>) for all our <code><input></code> states, like <code>:checked</code> or <code>:disabled</code>. When combined with the <code>.form-check-label</code> class, we can easily style the text for each item based on the <code><input></code>’s state.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/floating-labels/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
<p>Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/form-control/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="mb-3">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/input-group/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="basic-example">Basic example <a class="anchor-link" href="#basic-example" aria-label="Link to this section: Basic example"></a></h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code><label></code>s outside the input group.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/layout/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="forms">Forms <a class="anchor-link" href="#forms" aria-label="Link to this section: Forms"></a></h2>
<p>Every group of form fields should reside in a <code><form></code> element. Bootstrap provides no default styling for the <code><form></code> element, but there are some powerful browser features that are provided by default.</p>
<ul>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">form</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/overview/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
<div class="row g-3">
</div>
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Bootstrap’s form controls expand on <a href="/docs/5.2/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
<p>Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g., <code>email</code> for email address or <code>number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/range/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>Create custom <code><input type="range"></code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/select/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="default">Default <a class="anchor-link" href="#default" aria-label="Link to this section: Default"></a></h2>
<p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/forms/validation/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<script async src="/docs/5.2/assets/js/validate-forms.js"></script><div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/accessibility/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<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>
<h2 id="overview-and-limitations">Overview and limitations <a class="anchor-link" href="#overview-and-limitations" aria-label="Link to this section: Overview and limitations"></a></h2>
<p>The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill <a href="https://www.w3.org/TR/WCAG/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/">Section 508</a>, and similar accessibility standards and requirements.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/best-practices/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<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>
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> This copy is a work in progress.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/browsers-devices/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="supported-browsers">Supported browsers <a class="anchor-link" href="#supported-browsers" aria-label="Link to this section: Supported browsers"></a></h2>
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/contents/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="compiled-bootstrap">Compiled Bootstrap <a class="anchor-link" href="#compiled-bootstrap" aria-label="Link to this section: Compiled Bootstrap"></a></h2>
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/contribute/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="tooling-setup">Tooling setup <a class="anchor-link" href="#tooling-setup" aria-label="Link to this section: Tooling setup"></a></h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> to build the documentation and compile source files. Our <a href="https://github.com/twbs/bootstrap/blob/v5.2.3/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.</p>
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/download/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="compiled-css-and-js">Compiled CSS and JS <a class="anchor-link" href="#compiled-css-and-js" aria-label="Link to this section: Compiled CSS and JS"></a></h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.2.3</strong> to easily drop into your project, which includes:</p>
<ul>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="quick-start">Quick start <a class="anchor-link" href="#quick-start" aria-label="Link to this section: Quick start"></a></h2>
<p>Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this <a href="https://codepen.io/team/bootstrap/pen/qBamdLj">Bootstrap CodePen demo</a>.</p>
<br>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/javascript/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="individual-or-compiled">Individual or compiled <a class="anchor-link" href="#individual-or-compiled" aria-label="Link to this section: Individual or compiled"></a></h2>
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
<p>If you use a bundler (Webpack, Parcel, Vite…), you can use <code>/js/dist/*.js</code> files which are UMD ready.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/parcel/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-parcel.png, /docs/5.2/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
<strong>Want to skip to the end?</strong> Download the source code and working demo for this guide from the <a href="https://github.com/twbs/examples/tree/main/parcel">twbs/examples repository</a>. You can also <a href="https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html">open the example in StackBlitz</a> but not run it because Parcel isn’t currently supported there.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/rfs/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="what-is-rfs">What is RFS? <a class="anchor-link" href="#what-is-rfs" aria-label="Link to this section: What is RFS?"></a></h2>
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.6">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
<p>The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/rtl/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="get-familiar">Get familiar <a class="anchor-link" href="#get-familiar" aria-label="Link to this section: Get familiar"></a></h2>
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.2/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
<p>You may also want to read up on <a href="https://rtlcss.com/">the RTLCSS project</a>, as it powers our approach to RTL.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/vite/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-vite.png, /docs/5.2/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
<strong>Want to skip to the end?</strong> Download the source code and working demo for this guide from the <a href="https://github.com/twbs/examples/tree/main/vite">twbs/examples repository</a>. You can also <a href="https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html">open the example in StackBlitz</a> for live editing.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/webpack/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-webpack.png, /docs/5.2/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
<strong>Want to skip to the end?</strong> Download the source code and working demo for this guide from the <a href="https://github.com/twbs/examples/tree/main/webpack">twbs/examples repository</a>. You can also <a href="https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html">open the example in StackBlitz</a> for live editing.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/clearfix/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"clearfix"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary float-end"</span><span class="p">></span>Example Button floated right<span class="p"></</span><span class="nt">button</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/color-background/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.2.0</small>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/colored-links/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.2/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
</div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/position/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="fixed-top">Fixed top <a class="anchor-link" href="#fixed-top" aria-label="Link to this section: Fixed top"></a></h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fixed-top"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/ratio/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code><iframe></code>s, <code><embed></code>s, <code><video></code>s, and <code><object></code>s. These helpers also can be used on any standard HTML child element (e.g., a <code><div></code> or <code><img></code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
<p>Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows <a href="#custom-ratios">custom aspect ratios</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/stacks/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source <a href="https://almonk.github.io/pylon/">Pylon project</a>.</p>
<div class="bd-callout bd-callout-warning">
Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. <a href="https://caniuse.com/flexbox-gap">Read more</a>.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/stretched-link/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code>position</code> and <code>z-index</code> styles can help should this be required.</p>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/text-truncation/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<!-- Block level -->
</span></span><span class="line"><span class="cl"> This text is quite long, and will be truncated once displayed.
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/vertical-rule/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Vertical rules are inspired by the <code><hr></code> element, allowing you to create vertical dividers in common layouts. They’re styled just like <code><hr></code> elements:</p>
<ul>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/helpers/visually-hidden/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<h2 class="visually-hidden">Title for screen readers</h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/breakpoints/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="core-concepts">Core concepts <a class="anchor-link" href="#core-concepts" aria-label="Link to this section: Core concepts"></a></h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/columns/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> Be sure to <a href="/docs/5.2/layout/grid/">read the Grid page</a> first before diving into how to modify and customize your grid columns.
</div>
<div class="clearfix">
<svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive floated image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive floated image</text></svg>
-
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/containers/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-they-work">How they work <a class="anchor-link" href="#how-they-work" aria-label="Link to this section: How they work"></a></h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<p>Bootstrap comes with three different containers:</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/css-grid/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.</p>
<div class="bd-callout bd-callout-warning">
<strong>Heads up—our CSS Grid system is experimental and opt-in as of v5.1.0!</strong> We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"g-col-4"</span><span class="p">></span>.g-col-4<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
-
</div>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/grid/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/gutters/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-they-work">How they work <a class="anchor-link" href="#how-they-work" aria-label="Link to this section: How they work"></a></h2>
<ul>
<li>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/utilities/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="changing-display">Changing <code>display</code> <a class="anchor-link" href="#changing-display" aria-label="Link to this section: Changing display"></a></h2>
<p>Use our <a href="/docs/5.2/utilities/display/">display utilities</a> for responsively toggling common values of the <code>display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<h2 id="flexbox-options">Flexbox options <a class="anchor-link" href="#flexbox-options" aria-label="Link to this section: Flexbox options"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/layout/z-index/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code>100</code>+ or <code>500</code>+.</p>
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/migration/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small active" aria-current="page">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="v520">v5.2.0 <a class="anchor-link" href="#v520" aria-label="Link to this section: v5.2.0"></a></h2>
<hr class="mb-4">
<h3 id="refreshed-design">Refreshed design <a class="anchor-link" href="#refreshed-design" aria-label="Link to this section: Refreshed design"></a></h3>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/api/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
<div class="table-responsive"><table class="table table-utilities">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/background/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="background-color">Background color <a class="anchor-link" href="#background-color" aria-label="Link to this section: Background color"></a></h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.2/utilities/colors/">color utilities</a>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/borders/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="border">Border <a class="anchor-link" href="#border" aria-label="Link to this section: Border"></a></h2>
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
<h3 id="additive">Additive <a class="anchor-link" href="#additive" aria-label="Link to this section: Additive"></a></h3>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/colors/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="colors">Colors <a class="anchor-link" href="#colors" aria-label="Link to this section: Colors"></a></h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.2/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/display/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
<h2 id="notation">Notation <a class="anchor-link" href="#notation" aria-label="Link to this section: Notation"></a></h2>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/flex/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="enable-flex-behaviors">Enable flex behaviors <a class="anchor-link" href="#enable-flex-behaviors" aria-label="Link to this section: Enable flex behaviors"></a></h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-flex">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/float/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/interactions/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<h2 id="text-selection">Text selection <a class="anchor-link" href="#text-selection" aria-label="Link to this section: Text selection"></a></h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/opacity/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>The <code>opacity</code> property sets the opacity level for an element. The opacity level describes the transparency level, where <code>1</code> is not transparent at all, <code>.5</code> is 50% visible, and <code>0</code> is completely transparent.</p>
<p>Set the <code>opacity</code> of an element using <code>.opacity-{value}</code> utilities.</p>
<div class="bd-example d-sm-flex">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/overflow/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/position/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="position-values">Position values <a class="anchor-link" href="#position-values" aria-label="Link to this section: Position values"></a></h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-static"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/shadows/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/sizing/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="relative-to-the-parent">Relative to the parent <a class="anchor-link" href="#relative-to-the-parent" aria-label="Link to this section: Relative to the parent"></a></h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/spacing/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="margin-and-padding">Margin and padding <a class="anchor-link" href="#margin-and-padding" aria-label="Link to this section: Margin and padding"></a></h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
<div class="bd-callout bd-callout-info">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/text/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
</div>
</div>
-
<div class="bd-content ps-lg-2">
-
<h2 id="text-alignment">Text alignment <a class="anchor-link" href="#text-alignment" aria-label="Link to this section: Text alignment"></a></h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/vertical-align/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
<p>To vertically center non-inline content (like <code><div></code>s and more), use our <a href="/docs/5.2/utilities/flex/#align-items">flex box utilities</a>.</p>
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/visibility/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
-
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
-
</head>
<body>
<div class="skippy visually-hidden-focusable overflow-hidden">
</symbol>
</svg>
-
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
- <li class="nav-item col-6 col-lg-auto">
- <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
+
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
<hr class="d-lg-none text-white-50">
</li>
-
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.2 <span class="visually-hidden">(switch to other versions)</span>
</nav>
</header>
-
-
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
</ul>
</li>
- <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
+
<li class="bd-links-span-all">
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
Migration
</div>
-
-
<div class="bd-content ps-lg-2">
-
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
Elements with the <code>.invisible</code> class will be hidden <em>both</em> visually and for assistive technology/screen reader users.
</main>
</div>
-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
- <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
+
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
</ul>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
}
</script>
-
-
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>
projects / thirdparty / bootstrap.git / commitdiff
