+++ /dev/null
----
-title: Customize
-description: Learn how Bootstrap's colors power our design system theme. Customize and extend Bootstrap with Sass, a boatload of global options, and plenty of global and component-specific CSS variables.
-toc: false
-aliases: "/docs/[[config:docs_version]]/customize/"
-sections:
- - title: Sass
- description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
- - title: Options
- description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
- - title: Color
- description: Bootstrap includes 11 shades of 14 colors in our color system that can be used to power our theme.
- - title: Theme
- description: Semantic colors, typography, settings, and more that can be customized to fit your brand.
- - title: Color modes
- description: Build in light mode, dark mode, or both.
- - title: Components
- description: Learn how we build nearly all our components responsively and with base and modifier classes.
- - title: CSS variables
- description: Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.
- - title: Optimize
- description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience.
----
-
-## Overview
-
-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.
-
-Our two preferred methods are:
-
-1. Using Bootstrap [via package manager]([[docsref:/getting-started/install]]) so you can use and extend our source files.
-2. Using Bootstrap’s compiled distribution files or [jsDelivr]([[docsref:/getting-started/install#cdn]]) so you can add onto or override Bootstrap’s styles.
-
-While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]([[docsref:/customize/sass]]).
-
-For those who want to use the distribution files, review the [getting started page]([[docsref:/guides/quickstart]]) 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.
-
-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.
-
-## Sass vs CSS
-
-When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
-
-- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
-- We consider CSS variables to be the **first-class customization layer** for our users.
-- Sass variables are available for nearly every component—like the new `$check-*` variables for checkboxes. These Sass variables are then consumed by CSS variables on the relevant selector (e.g., `.check` with `--bs-check-bg: #{$check-bg}`) and applied through various properties.
-- CSS variables get their values from Sass variables, or CSS variables, depending on the context.
-- Sass helps us generate CSS variables, too. Think theme and config values, but across components, Sass is consuming CSS variables. This gives you two, clearer avenues for customization.
-
-With that in mind, you can customize Bootstrap 6 via CSS or Sass, both of which are easier than ever thanks to a revamped color system and theme configuration.
-
-## CSPs and embedded SVGs
-
-Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
-
-- [Accordion]([[docsref:/components/accordion]])
-- [Carousel controls]([[docsref:/components/carousel#with-controls]])
-- [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)
-- [Form validation icons]([[docsref:/forms/validation#server-side]])
-- [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
-
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/guides/webpack#extracting-svg-files]]), 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.
// .theme-success { --theme-base: var(--success-base); --theme-bg: var(--success-bg); ... }
// ...
```
+
+## CSPs and embedded SVGs
+
+Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
+
+- [Accordion]([[docsref:/components/accordion]])
+- [Carousel controls]([[docsref:/components/carousel#with-controls]])
+- [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)
+- [Form validation icons]([[docsref:/forms/validation#server-side]])
+- [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
+
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/guides/webpack#extracting-svg-files]]), 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.
projects / thirdparty / bootstrap.git / commitdiff
