How to extend/modify (customize) Bootstrap with SASS
Update 2022 (Bootstrap 5)
Generally speaking, customizing Bootstrap 5 SASS works the same way as it did in Bootstrap 4. However, some of the maps have changed (and new ones have been added) so you should follow the Bootstrap SASS documentation for details on how to add, remove or modify any of the maps.
Recent comments on this post indicate there's still some confusion about the order of customizations and imports. However, this concept hasn't changed...
"Variable overrides must come after our functions are imported, but before the rest of the imports"
Because of the way SASS variable defaults work, bootstrap ("the rest of the imports") should be imported AFTER any variable customizations/changes. Since your variable changes will not contain the !default
flag, your changes will not be overridden by the Bootstrap defaults when bootstrap is imported at the end.
The proof is in the pudding
Here's how to override / customize Bootstrap 4 with SASS...
Overrides and customizations should be kept in a separate custom.scss
file that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes changes or upgrading Bootstrap later 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...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* make changes to the !default Bootstrap variables */
$body-color: green;
/* 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 add a background-color.
/* create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}
3- Compile the SASS (node-sass, gulp-sass, webpack/NPM, etc..). The CSS output will contain the 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.
Bootstrap SASS Demo on Codeply
In summary, here's how it works:
1_ First, when the custom.scss
file is processed using SASS, the !default values are defined in the bootstrap/variables.scss
.
2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss
.
3_ 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.
For those that don't know SASS, try this tool that I made.
Also see:
How to get 15 columns in Bootstrap 4 in SASS CSS?
Bootstrap v4 grid sizes / Sass List
Customizing Bootstrap CSS template
Extending Bootstrap 4 and SASS
Extending Bootstrap 4 and SASS
It could be done by iterating the Bootstrap 4 theme-colors()
map like this...
@each $color, $value in $theme-colors {
.drop-shadow-#{$color} {
box-shadow: 3px 3px 3px $value;
}
}
https://www.codeply.com/go/LyLcAK9oHN
Also see: How to change the bootstrap primary color?
How can I extend Bootstrap classes in SASS if I only liked to bootstrap in the HTML file?
You need to include bootstrap by importing it in your main.scss.
something like:
@import 'bootstrap.scss';
.yourClass {
@extend .p-3;
font-weight: bold;
}
For more info read the documentation
how to @extend bootstrap classes using customized colors
You defined border-grey-5
not border-gray-5
. This is how you would create a new theme color named grey-5
and extend one of the generated classes:
$theme-colors: (
"primary": #7400d9,
"grey-5": #adb3bf,
);
.my-info-card2 {
@extend .card, .border-grey-5, .m-3, .mt-2;
}
Codeply
Also see:
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?
Extending in a media query in Sass and Bootstrap 4
You are right, you can not @extend
like this.
But you can @include
some @mixin
.
There is unfortunately no @mixin
to create .btn-link
variant by default in Bootstrap 4.
If you wanted some other variant, you could use these @mixin
s which are part of Bootstrap 4:
@include button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))
or this
@include button-outline-variant($color, $color-hover: #fff)
(Useful list of Boostrap 4 mixins)
But if you need .btn-link
you have to make your own @mixin
. Something like this (it's copy/paste style of .btn-link
in to new mixin):
//
// Link buttons
//
// Make a button look and behave like a link
@mixin btn-link() {
font-weight: $font-weight-normal;
color: $link-color;
background-color: transparent;
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
border-color: transparent;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
border-color: transparent;
box-shadow: none;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// No need for an active state here
}
And then you can use it as you wish:
//everything over 767px
@media (min-width: 768px) {
.box {
.logout-button {
@include btn-link;
}
}
}
Nice article about this: SCSS - Extending Classes Within Media Queries
How to extend/customize a bootstrap's class' descendants using SASS?
A very silly mistake. I had to use sticky
instead of 'sticky'
(notice the quotes) and that solved the problem.
Related Topics
How to Identify and Eliminate Unused CSS Styles from My Bloated Stylesheet
Display:Block Not Working in Chrome or Safari
How to Change a Background Image Opacity Without Changing on Div Content
Rounding Numbers in SASS and Adjusting the Amount of Decimals
Add HTML Tag Inside CSS Content Property
How to Use Srcset and Sizes for Responsive Images
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Can You Use CSS Transitions on Svg Attributes? Like Y2 on a Line
Box Shadows on Multiple Elements at Same Level But Without Overlap
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Hyperlinks Showing Url with Blueprint
How to Override Gwt Obfuscated Style for Datagrid Header
"Text-Decoration" and the ":After" Pseudo-Element
What Does It Mean When a CSS Property Starts with a Dash