You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getting-started/options.md
+21-3Lines changed: 21 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,29 @@ title: Customization options
4
4
group: getting-started
5
5
---
6
6
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.
8
8
9
-
## Available variables
9
+
## Customizing variables
10
10
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.
0 commit comments