Skip to main content  Skip to docs navigation  


Bootstrap  



Bootstrap
 



● Docs  
● Examples  
● Icons  
● Themes  
● Blog  


● GitHub  GitHub  

● Twitter  Twitter  

● Open Collective  Open Collective  




●

v5 releases

● Latest (5.3.x)  

● v5.2.3  
● v5.1.3  
● v5.0.2  

Previous releases

●v4.6.x
●v3.4.1
●v2.3.2

●All versions
  




●

●

●

●








Browse docs
 



● Getting started  

●Introduction
●Download
●Contents
●Browsers & devices
●JavaScript
●Webpack
●Parcel
●Vite
●Accessibility
●RFS
●RTL
●Contribute
  

● Customize  

●Overview
●Sass
●Options
●Color
●Color modes
●Components
●CSS variables
●Optimize
  

● Layout  

●Breakpoints
●Containers
●Grid
●Columns
●Gutters
●Utilities
●Z-index
●CSS Grid
  

● Content  

●Reboot
●Typography
●Images
●Tables
●Figures
  

● Forms  

●Overview
●Form control
●Select
●Checks & radios
●Range
●Input group
●Floating labels
●Layout
●Validation
  

● Components  

●Accordion
●Alerts
●Badge
●Breadcrumb
●Buttons
●Button group
●Card
●Carousel
●Close button
●Collapse
●Dropdowns
●List group
●Modal
●Navbar
●Navs & tabs
●Offcanvas
●Pagination
●Placeholders
●Popovers
●Progress
●Scrollspy
●Spinners
●Toasts
●Tooltips
  

● Helpers  

●Clearfix
●Color & background
●Colored links
●Focus ring
●Icon link
●Position
●Ratio
●Stacks
●Stretched link
●Text truncation
●Vertical rule
●Visually hidden
  

● Utilities  

●API
●Background
●Borders
●Colors
●Display
●Flex
●Float
●Interactions
●Link
●Object fit
●Opacity
●Overflow
●Position
●Shadows
●Sizing
●Spacing
●Text
●Vertical align
●Visibility
●Z-index
  

● Extend  

●Approach
●Icons
  

● About  

●Overview
●Team
●Brand
●License
●Translations
  


● Migration  





View on GitHub  

Options

 
Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
  


Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with npm run test as needed.
You can find and customize these variables for key global options in Bootstrap’sscss/_variables.scss file.
Variable Values Description
$spacer 1rem (default), or any value > 0 Specifies the default spacer value to programmatically generate our spacer utilities.
$enable-dark-mode true (default) or false Enables built-in dark mode support across the project and its components.
$enable-rounded true (default) or false Enables predefined border-radius styles on various components.
$enable-shadows trueorfalse (default) Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states.
$enable-gradients trueorfalse (default) Enables predefined gradients via background-image styles on various components.
$enable-transitions true (default) or false Enables predefined transitions on various components.
$enable-reduced-motion true (default) or false Enables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
$enable-grid-classes true (default) or false Enables the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.).
$enable-container-classes true (default) or false Enables the generation of CSS classes for layout containers. (New in v5.2.0)
$enable-caret true (default) or false Enables pseudo element caret on .dropdown-toggle.
$enable-button-pointers true (default) or false Add “hand” cursor to non-disabled button elements.
$enable-rfs true (default) or false Globally enables RFS.
$enable-validation-icons true (default) or false Enables background-image icons within textual inputs and some custom forms for validation states.
$enable-negative-margins trueorfalse (default) Enables the generation of negative margin utilities.
$enable-deprecation-messages true (default) or false Set to false to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in v6.
$enable-important-utilities true (default) or false Enables the !important suffix in utility classes.
$enable-smooth-scroll true (default) or false Applies scroll-behavior: smooth globally, except for users asking for reduced motion through prefers-reduced-motion media query
 


Bootstrap  Bootstrap  

●Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
●Code licensed MIT, docs CC BY 3.0.
●Currently v5.3.3.
  

Links


●Home
●Docs
●Examples
●Icons
●Themes
●Blog
●Swag Store
  

Guides


●Getting started
●Starter template
●Webpack
●Parcel
●Vite
  

Projects


●Bootstrap 5
●Bootstrap 4
●Icons
●RFS
●Examples repo
  

Community


●Issues
●Discussions
●Corporate sponsors
●Open Collective
●Stack Overflow