Approach · Bootstrap v6.0

Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
Bootstrap 6 brings with it a new philosophy of using Sass and CSS together to build and customize projects for your specific needs. At a high level:
Previous major versions have treated Sass as both programmatic and visual customization with CSS variables adding a more complicated, and less complete, secondary layer. This has been greatly improved in v6.
On top of that, we use PostCSS to prefix our CSS variables with the bs- prefix and add vendor prefixes to our CSS properties, as appropriate.
Sass is used for the following:
While you can use Sass to customize how Bootstrap looks, the preferred way now is to use CSS variables whenever possible, including when working with Sass. Here’s how we use CSS:
Here’s how we’d use a mix of Sass and CSS to customize Bootstrap. The Sass helps us manage features and gives us access to generative tokens, while the CSS allows us to customize individual tokens and values. In almost all our components, we setup a Sass map of "tokens" that are really just CSS variables. Using this map, we then generate the CSS custom properties on the component’s class.
For example, the alert component has a $alert-tokens map that is used to generate the CSS custom properties on the .alert class.
In practice for you and your projects, this means you can use Sass’s module system to override the CSS variables at build-time for a specific component, or even globally.
Here’s a Sass-specific example, where we cannot use CSS to easily achieve the same result. The following will remove the text and subtle variants from the button-variants map, and override the button-sizes map to only include sm and lg sizes.
Here’s an example of just using pure CSS to customize a CSS variables from the compiled CSS. Wherever var(--bs-border-radius) is used, it will be replaced with the value .25rem.
Bootstrap employs a handful of important global styles and settings geared towards normalizing browser styles, enabling responsive and mobile-first design, and providing a modern foundation to build upon.
Responsive web design is the practice of building a website that responds to the viewport size of the device it’s being viewed on. This is achieved by using range media queries to apply different styles to the website based on the viewport size.
Bootstrap ships with several responsive tiers or breakpoints that allow you to stack styles on top of each other, from small mobile devices to large desktop screens. This gives you a very flexible and powerful way to build websites that can be optimized for any-sized device.
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
You can see an example of this in action in the quick start.
For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element.
On the rare occasion you need to override it, use something like the following:
Learn more about box model and sizing at CSS Tricks.
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
You can find our supported range of browsers and their versions in our .browserslistrc file. See Browsers & devices for the reason behind each version, and for the platform features these floors do and do not give us.
If you installed Bootstrap via npm, you can also find this file locally at node_modules/bootstrap/.browserslistrc.
We use Autoprefixer to handle intended browser support via CSS prefixes, which uses Browserslist to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
Beyond what Bootstrap does, here’s why we do it—our philosophy for building on the web. At a high level, here’s what guides our approach:
These rules cannot always be followed to the letter, but we strive to follow them as much as possible.
Bootstrap’s styles are mobile-first—we add styles as the viewport grows rather than overriding them as it shrinks. Not every component must be fully responsive, but this approach reduces CSS overrides.
We use range media queries (width >= 768px, for example) to apply styles at a specific breakpoint and carry up through the larger breakpoints. For example, a .d-none applies from min-width: 0 to infinity. On the other hand, a .md:d-none applies from the medium breakpoint and up.
Aside from Reboot, we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
Components are typically built with a base class for shared property-value pairs. For example, .btn, .btn-solid, and .theme-primary. We use .btn for all the common styles like display, padding, and border-width. We then use variant and theme modifiers like .btn-solid.theme-primary to add more styles.
This reduces complexity, streamlines code, and makes for more scalable systems.
We use two z-index scales in Bootstrap—elements within a component and overlay components.
Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border property. For example, button groups, input groups, and pagination. These components share a standard z-index scale of 0 through 3, matching our expectations of highest user priority.
Components built with overlays also have a predefined z-index scale, beginning at 1000. This starting number was chosen arbitrarily and serv