Customize Bootstrap 4

about.md

Bootstrap 4 components individually imported

• List updated for Bootstrap 4.6.0
• Read the Bootstrap docs to find out more customising with Sass
• Learn about compiling Bootstrap on Stack Overflow

Tip: Use sass-plus to compile Sass and add vendor prefixes automatically: https://www.npmjs.com/package/sass-plus

app.scss

/*! You can insert a comment here. It will be included in the CSS. */

//Custom SCSS can be placed in here, for example

//Required

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

//Components - remove any that you don't need

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/print";

Spinner and toast components are now added to the SCSS - everything should now be up to date (Bootstrap 4.6.0)! 🎊

@Klooven

The container and max-width breakpoints components are not listed.

@gusbemacbe

Are you using Bootstrap 5? Everything should be included and up-to date for Bootstrap 4 in this Gist. I'll probably create a separate Gist for Bootstrap 5 at some moment. I can add a link to it when I've created it.

Yes, I do, @Klooven, I want to use max-width instead of min-width for both breakpoint and container.

@gusbemacbe

Ok, that explains it. I'll create a similar Gist for Bootstrap 5 in the coming weeks. In the meantime, feel free to look at Bootstrap's docs or repo as a reference: https://github.com/twbs/bootstrap/blob/v5.0.1/scss/bootstrap.scss 🙂