Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
Import one stylesheet and you're off to the races with every feature of our CSS.
{{ highlight (printf `// Variable overrides first $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Then import Bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; `) "scss" "" }}Learn more about our global Sass options.
The easiest way to customize Bootstrap—include only the CSS you need.
{{ highlight (printf `// Functions first @import "../node_modules/bootstrap/scss/functions"; // Variable overrides second $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // Optional components @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; @import "../node_modules/bootstrap/scss/utilities/api"; `) "scss" "" }}Learn more about using Bootstrap with Sass.