<!DOCTYPE html><htmllang="en"data-bs-theme="auto"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior."><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/options/"><linkrel="preconnect"href="https://AK7KMZKZHQ-dsn.algolia.net"crossorigin><title>Options · 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="Options"><metaname="twitter:description"content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior."><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/options/"><metaproperty="og:title"content="Options"><metaproperty="og:description"content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior."><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">Options</h1></div><pclass="bd-lead"> Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior. </p><scriptasyncsrc="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"id="_carbonads_js"></script></div><divclass="bd-content ps-lg-2"><p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable's value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap's <code>scss/_variables.scss</code> file.</p>
<divclass="table-responsive">
<tableclass="table table-options"><thead><tr><th>Variable</th><th>Values</th><th>Description</th></tr></thead><tbody><tr><td><code>$spacer</code></td><td><code>1rem</code> (default), or any value > 0</td><td>Specifies the default spacer value to programmatically generate our <ahref="/docs/5.3/utilities/spacing">spacer utilities</a>.</td></tr><tr><td><code>$enable-dark-mode</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables built-in <ahref="/docs/5.3/customize/color-modes#dark-mode">dark mode support</a> across the project and its components.</td></tr><tr><td><code>$enable-rounded</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables predefined <code>border-radius</code> styles on various components.</td></tr><tr><td><code>$enable-shadows</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables predefined decorative <code>box-shadow</code> styles on various components. Does not affect <code>box-shadow</code>s used for focus states.</td></tr><tr><td><code>$enable-gradients</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables predefined gradients via <code>background-image</code> styles on various components.</td></tr><tr><td><code>$enable-transitions</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables predefined <code>transition</code>s on various components.</td></tr><tr><td><code>$enable-reduced-motion</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the <ahref="/docs/5.3/getting-started/accessibility#reduced-motion"><code>prefers-reduced-motion</code> media query</a>, which suppresses certain animations/transitions based on the users' browser/operating system preferences.</td></tr><tr><td><code>$enable-grid-classes</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the generation of CSS classes for the grid system (e.g. <code>.row</code>, <code>.col-md-1</code>, etc.).</td></tr><tr><td><code>$enable-cssgrid</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables the experimental CSS Grid system (e.g. <code>.grid</code>, <code>.g-col-md-1</code>, etc.).</td></tr><tr><td><code>$enable-container-classes</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the generation of CSS classes for layout containers. (New in v5.2.0)</td></tr><tr><td><code>$enable-caret</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables pseudo element caret on <code>.dropdown-toggle</code>.</td></tr><tr><td><code>$enable-button-pointers</code></td><td><code>true</code> (default) or <code>false</code></td><td>Add "hand" cursor to non-disabled button elements.</td></tr><tr><td><code>$enable-rfs</code></td><td><code>true</code> (default) or <code>false</code></td><td>Globally enables <ahref="/docs/5.3/getting-started/rfs">RFS</a>.</td></tr><tr><td><code>$enable-validation-icons</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables <code>background-image</code> icons within textual inputs and some custom forms for validation states.</td></tr><tr><td><code>$enable-negative-margins</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables the generation of <ahref="/docs/5.3/utilities/spacing#negative-margin">negative margin utilities</a>.</td></tr><tr><td><code>$enable-deprecation-messages</code></td><td><code>true</code> (default) or <code>false</code></td><td>Set to <code>false</code> to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in <code>v6</code>.</td></tr><tr><td><code>$enable-important-utilities</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the <code>!important</code> suffix in utility classes.</td></tr><tr><td><code>$enable-smooth-scroll</code></td><td><code>true</code> (default) or <code>false</code></td><td>Applies <code>scroll-behavior: smooth</code> globally, except for users asking for reduced motion thro
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>.
