diff options
| author | Mark Otto <[email protected]> | 2016-01-17 16:05:27 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-01-17 16:05:27 -0800 |
| commit | 94e27cdd6e51373cd014df0a6776ace0d83cfb55 (patch) | |
| tree | e4c5fbde2a91301c4f9e4361a27e73c22509b587 /docs/getting-started | |
| parent | 567a0e9cee748d198fb3570e65b0a25a6aa373cb (diff) | |
| parent | dd4062f213b2b233ea5e57a8b2be93f41614c6ca (diff) | |
| download | bootstrap-94e27cdd6e51373cd014df0a6776ace0d83cfb55.tar.xz bootstrap-94e27cdd6e51373cd014df0a6776ace0d83cfb55.zip | |
Merge pull request #18921 from twbs/v4-custom-docs
Update docs to include mention of the custom variables file
Diffstat (limited to 'docs/getting-started')
| -rw-r--r-- | docs/getting-started/options.md | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 5de826f8b..0a98c40d3 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -4,11 +4,29 @@ title: Customization options group: 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. +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. -## Available variables +## Customizing variables -You can find and customize these variables in our `_variables.scss` file. +Bootstrap 4 ships with a `_custom.scss` file for easy variable overrides. Copy and paste relevant lines from `_variables.scss` into the custom file 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 + +You can find and customize these variables for key global options in our `_variables.scss` file. | Variable | Values | Description | | --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | |