<!DOCTYPE html><htmllang="en"data-bs-theme="auto"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content="Learn how and why we build nearly all our components responsively and with base and modifier classes."><metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><metaname="generator"content="Astro v5.4.2"><metaname="docsearch:language"content="en"><metaname="docsearch:version"content="5.3"><linkrel="canonical"href="https://getbootstrap.com/docs/5.3/customize/components/"><linkrel="preconnect"href="https://AK7KMZKZHQ-dsn.algolia.net"crossorigin><title>Components · Bootstrap v5.3</title><scriptsrc="/docs/5.3/assets/js/color-modes.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><linkhref="/docs/5.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"><linkrel="apple-touch-icon"href="/docs/5.3/assets/img/favicons/apple-touch-icon.png"sizes="180x180"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-32x32.png"sizes="32x32"type="image/png"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-16x16.png"sizes="16x16"type="image/png"><linkrel="manifest"href="/docs/5.3/assets/img/favicons/manifest.json"><linkrel="mask-icon"href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg"color="#712cf9"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon.ico"><metaname="theme-color"content="#712cf9"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:site"content="getbootstrap"><metaname="twitter:creator"content="getbootstrap"><metaname="twitter:title"content="Components"><metaname="twitter:description"content="Learn how and why we build nearly all our components responsively and with base and modifier classes."><metaname="twitter:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:url"content="https://getbootstrap.com/docs/5.3/customize/components/"><metaproperty="og:title"content="Components"><metaproperty="og:description"content="Learn how and why we build nearly all our components responsively and with base and modifier classes."><metaproperty="og:type"content="article"><metaproperty="og:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:image:type"content="image/png"><metaproperty="og:image:width"content="2000"><metaproperty="og:image:height"content="1000"><scriptdefersrc="https://cdn.usefathom.com/script.js"data-site="ITUSEYJG"></script><linkrel="stylesheet"href="/_astro/_slug_.BBRoHHoO.css"></head><bodytabindex="0"data-bs-spy="scroll"data-bs-target="#TableOfContents"><divclass="skippy visually-hidden-focusable overflow-hidden"><divclass="container-xl"><aclass="d-inline-flex p-2 m-1"href="#content">Skip to main content</a><aclass="d-none d-md-inline-flex p-2 m-1"href="#bd-docs-nav">
</a></div><h1class="bd-title mb-0"id="content">Components</h1></div><pclass="bd-lead"> Learn how and why we build nearly all our components responsively and with base and modifier classes. </p><scriptasyncsrc="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"id="_carbonads_js"></script></div><divclass="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary"><buttonclass="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"type="button"data-bs-toggle="collapse"data-bs-target="#tocContents"aria-expanded="false"aria-controls="tocContents">
On this page
<svgclass="bi d-md-none ms-2"aria-hidden="true"><usexlink:href="#chevron-expand"></use></svg></button><strongclass="d-none d-md-block h6 my-2 ms-3">On this page</strong><hrclass="d-none d-md-block my-2 ms-3"><divclass="collapse bd-toc-collapse"id="tocContents"><navid="TableOfContents"><ul><li><ahref="#base-classes">Base classes</a></li><li><ahref="#modifiers">Modifiers</a></li><li><ahref="#responsive">Responsive</a></li><li><ahref="#creating-your-own">Creating your own</a></li></ul></nav></div></div><divclass="bd-content ps-lg-2"><h2id="base-classes">Base classes<aclass="anchor-link"href="#base-classes"></a></h2>
<p>Bootstrap's components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<p>To build our modifier classes, we use Sass's <code>@each</code> loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our <code>$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops.</p>
<p>Check out <ahref="/docs/5.3/customize/sass#maps-and-loops">our Sass maps and loops docs</a> for how to customize these loops and extend Bootstrap's base-modifier approach to your own code.</p>
<p>Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., <code>.btn</code>) while style variations are confined to modifier classes (e.g., <code>.btn-danger</code>). These modifier classes are built from the <code>$theme-colors</code> map to make customizing the number and name of our modifier classes.</p>
<p>Here are two examples of how we loop over the <code>$theme-colors</code> map to generate modifiers to the <code>.alert</code> and <code>.list-group</code> components.</p>
<p>These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an <code>@each</code> loop for the <code>$grid-breakpoints</code> Sass map with a media query include.</p>
<divclass="bd-code-snippet bd-example-snippet bd-file-ref"><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom"><aclass="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"href="https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_dropdown.scss"> scss/_dropdown.scss </a><divclass="d-flex ms-auto"><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-scss"><codeclass="language-scss"><spanclass="token comment">// We deliberately hardcode the `bs-` prefix because we check</span>
<spanclass="token comment">// this custom property in JS to determine Popper's positioning</span>
<spanclass="token keyword">@each</span><spanclass="token variable">$breakpoint</span> in <spanclass="token function">map-keys</span><spanclass="token punctuation">(</span><spanclass="token variable">$grid-breakpoints</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
<p>For more information and examples on how to modify our Sass maps and variables, please refer to <ahref="/docs/5.3/layout/grid#css">the CSS section of the Grid documentation</a>.</p>
<h2id="creating-your-own">Creating your own<aclass="anchor-link"href="#creating-your-own"></a></h2>
<p>We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We've extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.</p>
<divclass="bd-example"><divclass="bd-callout my-0"><p><strong>This is a callout.</strong> We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.</p></div></div>
<p>In your CSS, you'd have something like the following where the bulk of the styling is done via <code>.callout</code>. Then, the unique styles between each variant is controlled via modifier class.</p>
<divclass="bd-code-snippet"><divclass="bd-clipboard"><buttontype="button"class="btn-clipboard"><svgclass="bi"role="img"aria-label="Copy"><usexlink:href="#clipboard"></use></svg></button></div><divclass="highlight"><preclass="language-scss"><codeis:rawclass="language-scss"><spanclass="token comment">// Base class</span>
<p>For the callouts, that unique styling is just a <code>border-left-color</code>. When you combine that base class with one of those modifier classes, you get your complete component family:</p>
<divclass="bd-callout bd-callout-info"><p><strong>This is an info callout.</strong> Example text to show it in action.</p></div>
<divclass="bd-callout bd-callout-warning"><p><strong>This is a warning callout.</strong> Example text to show it in action.</p></div>
<divclass="bd-callout bd-callout-danger"><p><strong>This is a danger callout.</strong> Example text to show it in action.</p></div></div></main></div><scriptsrc="/docs/5.3/dist/js/bootstrap.bundle.min.js"integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script><scripttype="module"src="/_astro/Scripts.astro_astro_type_script_index_0_lang.lFiTneBv.js"></script><scripttype="module"src="/_astro/Scripts.astro_astro_type_script_index_1_lang.CAqD2hc_.js"></script><scripttype="module">constp=()=>{constt=document.querySelector(".bd-sidebar"),a=document.querySelector(".bd-links-nav .active");if(!t||!a)return;constc=t.clientHeight,i=a.offsetTop,r=a.clientHeight,n=i,s=n-c+r;(t.scrollTop>n||t.scrollTop<s)&&(t.scrollTop=n-c/2+r/2)},v=()=>{document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(e=>{newbootstrap.Tooltip(e)}),document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{newbootstrap.Popover(e)});constt=document.getElementById("toastPlacement");t&&document.getElementById("selectToastPlacement").addEventListener("change",function(){t.dataset.originalClass||(t.dataset.originalClass=t.className),t.className=`${t.dataset.originalClass}${this.value}`}),document.querySelectorAll(".bd-example .toast").forEach(e=>{newbootstrap.Toast(e,{autohide:!1}).show()});consta=document.getElementById("liveToastBtn"),c=document.getElementById("liveToast");if(a){conste=bootstrap.Toast.getOrCreateInstance(c);a.addEventListener("click",()=>{e.show()})}consti=document.getElementById("liveAlertPlaceholder"),r=(e,o)=>{constl=document.createElement("div");l.innerHTML=[`<div class="alert alert-${o} alert-dismissible" role="alert">`,` <div>${e}</div>`,' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',"</div>"].join(""),i.append(l)},n=document.getElementById("liveAlertBtn");n&&n.addEventListener("click",()=>{r("Nice, you triggered this alert message!","success")}),document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])').forEach(e=>{bootstrap.Carousel.getOrCreateInstance(e)}),document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]').forEach(e=>{e.id.includes("Indeterminate")&&(e.indeterminate=!0)}),document.querySelectorAll('.bd-content [href="#"]').forEach(e=>{e.addEventListener("click",o=>{o.preventDefault()})});consts=document.getElementById("exampleModal");s&&s.addEventListener("show.bs.modal",e=>{constl=e.relatedTarget.getAttribute("data-bs-whatever"),m=s.querySelector(".modal-title"),u=s.querySelector(".modal-body input");m.textContent=`New message to ${l}`,u.value=l});constd=document.querySelectorAll(".bd-example-offcanvas .offcanvas");d&&d.forEach(e=>{e.addEventListener("show.bs.offcanvas",o=>{o.preventDefault()},!1)})};p();v();</script><footerclass="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary"><divclass="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"><divclass="row"><divclass="col-lg-3 mb-3"><aclass="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"href="/"aria-label="Bootstrap"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 118 94"role="img"class="d-block me-2"height="32"width="40"><title>Bootstrap</title><pathfill-rule="evenodd"clip-rule="evenodd"d="M24.5090c-6.7330-11.7155.893-11.49212.284.2146.14-.06414.092-2.06620.577C8.94339.3655.54743.485044.014v5.972c5.547.5298.9434.64910.95111.1532.0026.4852.2814.4372.06620.577C12.79488.10617.7769424.5194H93.5c6.733011.714-5.89311.491-12.284-.214-6.14.064-14.0922.066-20.5772.009-6.5045.396-10.62410.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.2145.894100.233093.50H24.508zM8057.863C8066.66373.4367262.54372H44a22001-2-2V24a220012-2h18.437c9.083015.0444.9215.04412.47405.302-4.0110.049-9.11910.88v.277C75.31746.3948051.218057.863zM60.52128.34H49.948v14.934h8.905c6.884010.68-2.77210.68-7.7270-4.643-3.264-7.207-9.012-7.207zM49.94849.2v16.458H60.91c7.167010.964-
Designed and built with all the love in the world by the <ahref="/docs/5.3/about/team">Bootstrap team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.
</li><liclass="mb-2">
Code licensed <ahref="https://github.com/twbs/bootstrap/blob/main/LICENSE"target="_blank"rel="license noopener">MIT</a>, docs <ahref="https://creativecommons.org/licenses/by/3.0/"target="_blank"rel="license noopener">CC BY 3.0</a>.
