Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/src/content/docs/customize/components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ toc: true

## Base classes

Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like `.btn`, and then group individual styles for each variant into modifier classes, like `.btn-primary` or `.btn-success`.
Bootstrap components are typically built with composable classes: a shared base class, variant classes, and optional theme classes. For example, buttons can start from `.btn` and combine variant classes like `.btn-solid` or `.btn-outline` with theme classes like `.theme-primary` or `.theme-success`.

To build our modifier classes, we use Sass’s `@each` loops to iterate over Sass maps. This is especially helpful for generating variants of a component from our `$theme-colors` nested map and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.
Many of these classes are generated with Sass `@each` loops over component maps (for things like variants and sizes) and theme maps. This keeps class APIs consistent across components and lets one map change update all related selectors at once, including responsive variants where applicable.

Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to customize these loops and extend Bootstrap’s base-modifier approach to your own code.

Expand Down