In general, there are 2 methods used to customize Bootstrap:
For maintainability, CSS customizations should be put in a separate custom.css file, so that the bootstrap.css remains unmodified.
The reference to the custom.css follows after the bootstrap.css for the overrides to work...
How to... Bootstrap
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
Just add whatever changes are needed in the custom CSS. For example, say I wanted to remove rounded borders from Cards, Buttons and Form Inputs. I add the CSS rule in the custom.css…
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
With this simple CSS change, the Cards, Buttons and Form Inputs now have square corners…
Note: There’s no need to use !important in the custom CSS, unless you're overriding one of the Bootstrap Utility classes. CSS specificity always works for one CSS class to override another.
Using CSS overrides is feasible for simple Bootstrap customizations, but for more extensive changes, SASS is the recommended method. Suppose for
example you want to change the default blue "primary" color in Bootstrap to another color (eg. red). You can make a simple CSS override for the
.btn-primary button like this...
.btn-primary {
background-color: red;
}
This does work to make the .btn-primary button red, but it doesn't change the other btn-primary states like ":hover" and ":active". It also doesn't
change the "primary" color throughout the CSS for .alert-primary,
.text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
If you’re familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss.
The overrides and “customization” are defined in a custom.scss file (you can name it whatever you want) that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes future changes and upgrades much easier.
1. Consider Bootstrap’s SASS folder structure, alongside your custom.scss...
|-- \bootstrap
| |-- \scss
| | |-- \mixins
| | |-- \utilities
| | |-- bootstrap.scss
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
| custom.scss
2. In your custom.scss, import the Bootstrap files that are needed for the overrides. (Usually, this is just variables.scss. In some cases, with more complex cutomizations, you may also need the functions, mixins, and other Bootstrap files.). Make the changes, then @import "bootstrap". It's important to import Bootstrap after the changes.
For example, let’s change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* or, use an existing variable */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
2a (optional). Also, you can extend existing Bootstrap classes after the @import "bootstrap"; to create new custom classes. For example, here is a new .row-dark
class that extends (inherits from) the Bootstrap .row class, and then adds a background-color and color…
/* optionally create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}
3. Build with SASS. The CSS output will contain the custom overrides! Don’t forget to check the includePaths if your @imports fail.
For a full list of variables you can override, see the variables.scss file. There are also these global variables.
Remember, with SASS you must @import “bootstrap” after the customizations in custom.scss to make them work! Once the SASS is compiled to
CSS (this is done using a server-side SASS compiler/processor), the resulting CSS is the customized Bootstrap.
In summary, here’s how the SASS customizations work:
First, when the custom.scss file is processed using SASS, the !default values defined in the Bootstrap variables.scss.
Next, our custom values are set, which will override any of the variables that had !default values set in Bootstrap variables.scss.
Finally, Bootstrap is imported (@import "bootstrap") which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS using both the Bootstrap defaults and the custom overrides.