Skip to content

Commit 94e27cd

Browse files
committed
Merge pull request #18921 from twbs/v4-custom-docs
Update docs to include mention of the custom variables file
2 parents 567a0e9 + dd4062f commit 94e27cd

File tree

2 files changed

+24
-6
lines changed

2 files changed

+24
-6
lines changed

docs/getting-started/options.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,29 @@ title: Customization options
44
group: getting-started
55
---
66

7-
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.
7+
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.
88

9-
## Available variables
9+
## Customizing variables
1010

11-
You can find and customize these variables in our `_variables.scss` file.
11+
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.**
12+
13+
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
14+
15+
{% highlight scss %}
16+
// Bootstrap overrides
17+
//
18+
// Copy variables from `_variables.scss` to this file to override default values
19+
// without modifying source files.
20+
21+
$body-bg: $gray-dark;
22+
$body-color: $gray-light;
23+
{% endhighlight %}
24+
25+
Do the same for any variable you need to override, including the global options listed below.
26+
27+
## Global options
28+
29+
You can find and customize these variables for key global options in our `_variables.scss` file.
1230

1331
| Variable | Values | Description |
1432
| --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |

scss/_custom.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Custom Overrides
1+
// Bootstrap overrides
22
//
3-
// Copy settings from `_variables.scss` to this file to override
4-
// the Bootstrap defaults without modifying key, versioned files.
3+
// Copy variables from `_variables.scss` to this file to override default values
4+
// without modifying source files.

0 commit comments

Comments
 (0)