Customizing content

The styling of content (typography, images, tables, and figures) can be customized using variables found in the _variables.scss file, on lines 543–651 and lines 1500–1513.

We will now see how we can customize different kinds of content.

Typography

There are a lot of variables used to define the overall typography of Bootstrap 5. In fact, there are more than 50 different variables. The variable names are self-explanatory in most cases, so let’s take a deep dive and see the full list. The line number, variable name, and default value for all of these elements of typography are as follows:

bootstrap/scss/_variables.scss

543 $font-family-sans-serif: system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, 
    "Noto Sans", "Liberation Sans", sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji&quot...