Save time by using some of Bootstrap’s most popular variables, rather than weighing your site down by adding extra CSS. Here are ten of the ones we use most often.
1. Colors and Theme Colors
$blue: #0d6efd !default;
$primary: $blue !default;
The most common place to start for any design is the color palette. This brings in the basic look and feel of the brand and cuts down on that repetitive process of looking up color codes. We start by defining the actual colors we might have available (i.e. blue, green, white, etc.) and then assign those colors to some widely-used ‘theme variables’ like “primary,” “success,” “danger,” etc. These colors then form the foundation for many of the other Bootstrap elements.
2. Spacer
$spacer: 1rem !default;
The spacer value is the under-appreciated workhorse of the Bootstrap utility classes. By defining our default spacer, we set the standard for margins and paddings.
Alternatively, you can drill down into the default levels of the spacing by reviewing the full list:
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
By default, our spacer value is level 3, so we can use utilities like the p-3 class to add space inside our element or m-3 to add space outside. If we need a little less or a little more at the bottom, we can use the other numbers. A class like mb-5 will give us a lot more space. A class like mb-md-5 will do the same, but only for screen sizes ‘medium’ and up.
3. Border Radius
$border-radius: .25rem !default;
$border-radius-sm: .2rem !default;
$border-radius-lg: .3rem !default;
Your designs will typically fall into one of two camps: square corners or rounded corners. By setting these defaults ahead of time, all of your elements — from cards and modals to dropdowns and buttons — will follow suit. Of course, you can override them later with other more specific variables for different components or the border-radius utility classes.
4. Font Families
$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", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$headings-font-family: null !default;
Bootstrap loads the system fonts by default, which are actually a great performance and page-speed boost. Most likely, though, you’ll have your own fonts in mind. We recommend setting the base font family to start with; however, there may be chances you’ll have a separate font family for headings, so the headings font family variable should not be ignored.
5. Line Height and Text Spacing
$line-height-base: 1.5 !default;
$headings-margin-bottom: $spacer * .5 !default;
$paragraph-margin-bottom: 1rem !default;
The default Bootstrap design includes decent spacing between elements, but it may not flow correctly with your design or with the type of website you’re building. For example, for blog, newsletter, or other narrative style websites with long blocks of text, you might find yourself updating $line-height-base to something more spacious, like 1.75, but decreasing the $paragraph-margin-bottom a little bit. On the other hand, if you’re using bold styles for your headings you may want to decrease that margin-bottom to set those headings directly on top of your paragraphs.
6. Link Decoration
$link-decoration: none;
$link-hover-decoration: underline;
The most recent version of Bootstrap throws an underline on all links by default. Many designs prefer to indicate links by using the primary color variable (which Bootstrap does as well) and remove the underline or save it for a hover effect. Rather than digging into very scoped CSS and throwing !important tags around, start with their basic link-decoration variable to get the design you need.
7. Navbar Spacing
$nav-link-padding-y: .5rem !default;
$navbar-padding-y: $spacer * .5 !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
There’s more than a few variables for designing your site’s navbar here, so we’ll just point out a few key recommendations based on our experience. Navbar-padding-y is a great default to just configure your overall spacing for the navbar if you want it big and beefy or a little leaner. Then, you can dig in deeper to these variables if needed, which, if used correctly, can keep the navbar looking even and proportional.
8. Navbar Colors
$navbar-light-color: rgba($black, .55) !default;
$navbar-dark-color: rgba($white, .55) !default;
Another key set of variables we often find needs adjusting are the navbar color variables for light and dark navbars. The default colors feel a little too low-contrast for our accessibility tastes and will often make your site fail to meet WCAG. We recommend paying attention to the full-color array in the navbar and any other components you plan on using and running your dev site through a tool like the WAVE Accessibility checker.
9. Box Shadow Utility
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
Since the ascent of Material Design and other faintly-skeuomorphic UI kits, the box-shadow has tended to pervade web design in general. Even a slight amount of shadow can add some depth, texture, and professionalism to an otherwise flat design. Bootstrap offers three classes you can use throughout your markup: box-shadow, box-shadow-sm, and box-shadow-lg. Or you can add “box-shadow: $box-shadow;” to an element inside your SCSS to add it to a custom design.
Bonus: many other elements have their own box-shadow variable (typically set to “null” so you can add the default box-shadow automatically. An example would look like this:
$card-box-shadow: $box-shadow !default;
10. Input Placeholder Color
$input-placeholder-color: $gray-600 !default;
While form input placeholder text may not feel like the most important part of your design, it’s worth noting the Bootstrap’s default placeholder text color, when used on a white background, is not accessible to many visually impaired users and fails to pass the contrast check.