static/scss/bootstrap-4.0.0-alpha.6/docs/getting-started/options.md

   1 ---
   2 layout: docs
   3 title: Customization options
   4 description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
   5 group: getting-started
   6 ---
   7
   8 Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed.
   9
  10 ## Customizing variables
  11
  12 Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
  13
  14 For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
  15
  16 {% highlight scss %}
  17 // Bootstrap overrides
  18 //
  19 // Copy variables from `_variables.scss` to this file to override default values
  20 // without modifying source files.
  21
  22 $body-bg:    $gray-dark;
  23 $body-color: $gray-light;
  24 {% endhighlight %}
  25
  26 Do the same for any variable you need to override, including the global options listed below.
  27
  28 ## Global options
  29
  30 You can find and customize these variables for key global options in our `_variables.scss` file.
  31
  32 | Variable                    | Values                             | Description                                                                            |
  33 | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
  34 | `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities.                           |
  35 | `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components.                       |
  36 | `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components.                          |
  37 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components.      |
  38 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                                |
  39 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                                    |
  40 | `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |
  41 | `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |