mdb-ui-kit/docs/getting-started/options.md
2015-12-10 09:02:44 -06:00

5.2 KiB

layout title group
docs Customization options getting-started

With Bootstrap 4, we've added a handful of global options for easily customizing all the components in your project. These options are handled by Sass variables. Simply change a variable's value and recompile with the included Gruntfile.

Available variables

You can find and customize these variables in our _variables.scss file.

Variable Values Description
$spacer 1rem (default), or any value > 0 Specifies the default spacer value for our spacer utilities.
$enable-flex true or false (default) Swaps float and display: table styles for display: flex.
$enable-rounded true (default) or false Enables predefined border-radius styles on various components.
$enable-shadows true or false (default) Enables predefined box-shadow styles on various components.
$enable-gradients true or false (default) Enables predefined gradients via background-image various components.
$enable-transitions true (default) or false Enables predefined transitions on various components.
$enable-hover-media-query true or false (default) ...

Color palette

Bootstrap's color palette includes a numerical range of shades for each base color, heavily inspired by Google's color palette. Base colors, which utilize Sass color functions to generate each shade, are indicated at the top of each stacked palette.

100
100
200
300
400
500
600
700
800
900
500
100
200
300
400
500
600
700
800
900
500
100
200
300
400
500
600
700
800
900
500
100
200
300
400
500
600
700
800
900
500
100
200
300
400
500
600
700
800
900
500
100
200
300
400
500
600
700
800
900