<!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 to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more."><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/overview/"><linkrel="preconnect"href="https://AK7KMZKZHQ-dsn.algolia.net"crossorigin><title>Customize · 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="Customize"><metaname="twitter:description"content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more."><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/overview/"><metaproperty="og:title"content="Customize"><metaproperty="og:description"content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more."><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"><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">Customize</h1></div><pclass="bd-lead"> Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more. </p><scriptasyncsrc="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"id="_carbonads_js"></script></div><divclass="bd-content ps-lg-2"><divclass="row g-3"><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./sass/"><strongclass="d-block h5 mb-0">Sass</strong><spanclass="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./options/"><strongclass="d-block h5 mb-0">Options</strong><spanclass="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./color/"><strongclass="d-block h5 mb-0">Color</strong><spanclass="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./color-modes/"><strongclass="d-block h5 mb-0">Color modes</strong><spanclass="text-secondary">Explore our default light mode and the new dark mode, or create custom color modes yourself.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./components/"><strongclass="d-block h5 mb-0">Components</strong><spanclass="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./css-variables/"><strongclass="d-block h5 mb-0">CSS variables</strong><spanclass="text-secondary">Use Bootstrap's CSS custom properties for fast and forward-looking design and development.</span></a></div><divclass="col-md-6"><aclass="d-block text-decoration-none"href="./optimize/"><strongclass="d-block h5 mb-0">Optimize</strong><spanclass="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span></a></div></div><h2id="overview">Overview<aclass="anchor-link"href="#overview"></a></h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you're using, browser support, and more.</p>
<li>Using Bootstrap <ahref="/docs/5.3/getting-started/download#package-managers">via package manager</a> so you can use and extend our source files.</li>
<li>Using Bootstrap's compiled distribution files or <ahref="/docs/5.3/getting-started/download#cdn-via-jsdelivr">jsDelivr</a> so you can add onto or override Bootstrap's styles.</li>
<p>While we cannot go into details here on how to use every package manager, we can give some guidance on <ahref="/docs/5.3/customize/sass">using Bootstrap with your own Sass compiler</a>.</p>
<p>For those who want to use the distribution files, review the <ahref="/docs/5.3/getting-started/introduction">getting started page</a> for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use.</p>
<p>As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.</p>
<h2id="csps-and-embedded-svgs">CSPs and embedded SVGs<aclass="anchor-link"href="#csps-and-embedded-svgs"></a></h2>
<p>Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. <strong>For organizations with more strict <abbrtitle="Content Security Policy">CSP</abbr> configurations</strong>, we've documented all instances of our embedded SVGs (all of which are applied via <code>background-image</code>) so you can more thoroughly review your options.</p>
<p>Based on <ahref="https://github.com/twbs/bootstrap/issues/25394">community conversation</a>, some options for addressing this in your own codebase include <ahref="/docs/5.3/getting-started/webpack#extracting-svg-files">replacing the URLs with locally hosted assets</a>, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.</p></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-2
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>.
