ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
<img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>GeoSot</strong> @geosot
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
<img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Rohit Sharma</strong> @rohit2sharma95
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
<img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>alpadev</strong> @alpadev
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Gaël Poupard</strong> @ffoodd
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the popover plugin:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the tooltip plugin:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<td>Cell</td>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
-
+
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
-
+
<div class="p-3 bd-blue-100">$blue-100</div>
-
+
<div class="p-3 bd-blue-200">$blue-200</div>
-
+
<div class="p-3 bd-blue-300">$blue-300</div>
-
+
<div class="p-3 bd-blue-400">$blue-400</div>
-
+
<div class="p-3 bd-blue-500">$blue-500</div>
-
+
<div class="p-3 bd-blue-600">$blue-600</div>
-
+
<div class="p-3 bd-blue-700">$blue-700</div>
-
+
<div class="p-3 bd-blue-800">$blue-800</div>
-
+
<div class="p-3 bd-blue-900">$blue-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
-
+
<div class="p-3 bd-indigo-100">$indigo-100</div>
-
+
<div class="p-3 bd-indigo-200">$indigo-200</div>
-
+
<div class="p-3 bd-indigo-300">$indigo-300</div>
-
+
<div class="p-3 bd-indigo-400">$indigo-400</div>
-
+
<div class="p-3 bd-indigo-500">$indigo-500</div>
-
+
<div class="p-3 bd-indigo-600">$indigo-600</div>
-
+
<div class="p-3 bd-indigo-700">$indigo-700</div>
-
+
<div class="p-3 bd-indigo-800">$indigo-800</div>
-
+
<div class="p-3 bd-indigo-900">$indigo-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
-
+
<div class="p-3 bd-purple-100">$purple-100</div>
-
+
<div class="p-3 bd-purple-200">$purple-200</div>
-
+
<div class="p-3 bd-purple-300">$purple-300</div>
-
+
<div class="p-3 bd-purple-400">$purple-400</div>
-
+
<div class="p-3 bd-purple-500">$purple-500</div>
-
+
<div class="p-3 bd-purple-600">$purple-600</div>
-
+
<div class="p-3 bd-purple-700">$purple-700</div>
-
+
<div class="p-3 bd-purple-800">$purple-800</div>
-
+
<div class="p-3 bd-purple-900">$purple-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
-
+
<div class="p-3 bd-pink-100">$pink-100</div>
-
+
<div class="p-3 bd-pink-200">$pink-200</div>
-
+
<div class="p-3 bd-pink-300">$pink-300</div>
-
+
<div class="p-3 bd-pink-400">$pink-400</div>
-
+
<div class="p-3 bd-pink-500">$pink-500</div>
-
+
<div class="p-3 bd-pink-600">$pink-600</div>
-
+
<div class="p-3 bd-pink-700">$pink-700</div>
-
+
<div class="p-3 bd-pink-800">$pink-800</div>
-
+
<div class="p-3 bd-pink-900">$pink-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
-
+
<div class="p-3 bd-red-100">$red-100</div>
-
+
<div class="p-3 bd-red-200">$red-200</div>
-
+
<div class="p-3 bd-red-300">$red-300</div>
-
+
<div class="p-3 bd-red-400">$red-400</div>
-
+
<div class="p-3 bd-red-500">$red-500</div>
-
+
<div class="p-3 bd-red-600">$red-600</div>
-
+
<div class="p-3 bd-red-700">$red-700</div>
-
+
<div class="p-3 bd-red-800">$red-800</div>
-
+
<div class="p-3 bd-red-900">$red-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
-
+
<div class="p-3 bd-orange-100">$orange-100</div>
-
+
<div class="p-3 bd-orange-200">$orange-200</div>
-
+
<div class="p-3 bd-orange-300">$orange-300</div>
-
+
<div class="p-3 bd-orange-400">$orange-400</div>
-
+
<div class="p-3 bd-orange-500">$orange-500</div>
-
+
<div class="p-3 bd-orange-600">$orange-600</div>
-
+
<div class="p-3 bd-orange-700">$orange-700</div>
-
+
<div class="p-3 bd-orange-800">$orange-800</div>
-
+
<div class="p-3 bd-orange-900">$orange-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
-
+
<div class="p-3 bd-yellow-100">$yellow-100</div>
-
+
<div class="p-3 bd-yellow-200">$yellow-200</div>
-
+
<div class="p-3 bd-yellow-300">$yellow-300</div>
-
+
<div class="p-3 bd-yellow-400">$yellow-400</div>
-
+
<div class="p-3 bd-yellow-500">$yellow-500</div>
-
+
<div class="p-3 bd-yellow-600">$yellow-600</div>
-
+
<div class="p-3 bd-yellow-700">$yellow-700</div>
-
+
<div class="p-3 bd-yellow-800">$yellow-800</div>
-
+
<div class="p-3 bd-yellow-900">$yellow-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
-
+
<div class="p-3 bd-green-100">$green-100</div>
-
+
<div class="p-3 bd-green-200">$green-200</div>
-
+
<div class="p-3 bd-green-300">$green-300</div>
-
+
<div class="p-3 bd-green-400">$green-400</div>
-
+
<div class="p-3 bd-green-500">$green-500</div>
-
+
<div class="p-3 bd-green-600">$green-600</div>
-
+
<div class="p-3 bd-green-700">$green-700</div>
-
+
<div class="p-3 bd-green-800">$green-800</div>
-
+
<div class="p-3 bd-green-900">$green-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
-
+
<div class="p-3 bd-teal-100">$teal-100</div>
-
+
<div class="p-3 bd-teal-200">$teal-200</div>
-
+
<div class="p-3 bd-teal-300">$teal-300</div>
-
+
<div class="p-3 bd-teal-400">$teal-400</div>
-
+
<div class="p-3 bd-teal-500">$teal-500</div>
-
+
<div class="p-3 bd-teal-600">$teal-600</div>
-
+
<div class="p-3 bd-teal-700">$teal-700</div>
-
+
<div class="p-3 bd-teal-800">$teal-800</div>
-
+
<div class="p-3 bd-teal-900">$teal-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
-
+
<div class="p-3 bd-cyan-100">$cyan-100</div>
-
+
<div class="p-3 bd-cyan-200">$cyan-200</div>
-
+
<div class="p-3 bd-cyan-300">$cyan-300</div>
-
+
<div class="p-3 bd-cyan-400">$cyan-400</div>
-
+
<div class="p-3 bd-cyan-500">$cyan-500</div>
-
+
<div class="p-3 bd-cyan-600">$cyan-600</div>
-
+
<div class="p-3 bd-cyan-700">$cyan-700</div>
-
+
<div class="p-3 bd-cyan-800">$cyan-800</div>
-
+
<div class="p-3 bd-cyan-900">$cyan-900</div>
-
+
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
-
+
<div class="p-3 bd-gray-200">$gray-200</div>
-
+
<div class="p-3 bd-gray-300">$gray-300</div>
-
+
<div class="p-3 bd-gray-400">$gray-400</div>
-
+
<div class="p-3 bd-gray-500">$gray-500</div>
-
+
<div class="p-3 bd-gray-600">$gray-600</div>
-
+
<div class="p-3 bd-gray-700">$gray-700</div>
-
+
<div class="p-3 bd-gray-800">$gray-800</div>
-
+
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap's CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
-
+
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
-
+
</div>
</div>
</header>
-
+
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
-
+
<div class="d-flex flex-column flex-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.0.0/bootstrap-5.0.0-examples.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.0.0.zip" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
-
+
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<main class="bd-content order-1 py-5" id="content">
<div class="container">
-
+
<h2 id="snippets">Snippets</h2>
<p>Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.</p>
<div class="row">
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
</a>
<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,
<p class="text-muted">Combine the powers of the Bootstrap grid and the Masonry layout.</p>
</div>
</div>
-
-
+
+
<hr class="my-5">
<div class="container">
<div class="text-center">
src="/docs/5.0/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
-
+
</div>
</main>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<div class="bd-example">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../form-control/">
<strong class="d-block h5 mb-0">Form control</strong>
<span class="text-secondary">Style textual inputs and textareas with support for multiple states.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../select/">
<strong class="d-block h5 mb-0">Select</strong>
<span class="text-secondary">Improve browser default select elements with a custom initial appearance.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../checks-radios/">
<strong class="d-block h5 mb-0">Checks & radios</strong>
<span class="text-secondary">Use our custom radio buttons and checkboxes in forms for selecting input options.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../range/">
<strong class="d-block h5 mb-0">Range</strong>
<span class="text-secondary">Replace browser default range inputs with our custom version.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../input-group/">
<strong class="d-block h5 mb-0">Input group</strong>
<span class="text-secondary">Attach labels and buttons to your inputs for increased semantic value.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../floating-labels/">
<strong class="d-block h5 mb-0">Floating labels</strong>
<span class="text-secondary">Create beautifully simple form labels that float over your input fields.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../layout/">
<strong class="d-block h5 mb-0">Layout</strong>
<span class="text-secondary">Create inline, horizontal, or complex grid-based layouts with your forms.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../validation/">
<strong class="d-block h5 mb-0">Validation</strong>
<span class="text-secondary">Validate your forms with custom or native validation behaviors and styles.</span>
</a>
</div>
-
+
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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 Edge Legacy and 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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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.
<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>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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.0/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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.0</strong> to easily drop into your project, which includes:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="core-concepts">Core concepts</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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.
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-they-work">How they work</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="dependencies">Dependencies</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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">
</ul>
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
</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">
</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>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
+<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
projects / thirdparty / bootstrap.git / commitdiff
