diff options
| author | Mark Otto <[email protected]> | 2017-05-28 22:50:57 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-29 23:32:28 -0700 |
| commit | 3e76d6565603fafa2c85ad81d7b6345c4e279c72 (patch) | |
| tree | fad0aa6a4a70cafb4a803bd920d6ae2fa44dc466 /docs/4.0/getting-started/options.md | |
| parent | 32153eb7cba316b873e82cd7b9362c92ca00eddf (diff) | |
| download | bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.tar.xz bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.zip | |
Rearrange all the docs to allow for a docs/major.minor/ setup
Diffstat (limited to 'docs/4.0/getting-started/options.md')
| -rw-r--r-- | docs/4.0/getting-started/options.md | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md new file mode 100644 index 000000000..acc7ce451 --- /dev/null +++ b/docs/4.0/getting-started/options.md @@ -0,0 +1,42 @@ +--- +layout: docs +title: Customization options +description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables. +group: getting-started +toc: true +--- + +## Customizing variables + +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.** + +For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following: + +{% highlight scss %} +// Bootstrap overrides +// +// Copy variables from `_variables.scss` to this file to override default values +// without modifying source files. + +$body-bg: $gray-dark; +$body-color: $gray-light; +{% endhighlight %} + +Do the same for any variable you need to override, including the global options listed below. + +## Global options + +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 `npm run test` as needed. + +You can find and customize these variables for key global options in our `_variables.scss` file. + +| Variable | Values | Description | +| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). | +| `$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` styles on various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$enable-hover-media-query` | `true` or `false` (default) | ... | +| `$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.). | +| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | |