Bootstrap/docs/getting-started/options.md

---
layout: docs
title: Customization options
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
group: getting-started
---

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.

## 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

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.                                |
stub out that customize page 2015-04-19 03:12:18 +02:00			`---`
Massive cleanup - Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color 2015-08-15 07:45:55 +02:00			`layout: docs`
tweak options, renamed from customize 2015-08-10 19:05:38 +02:00			`title: Customization options`
v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements 2016-10-03 03:19:47 +02:00			`description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.`
restore page headers, use partial and page frontmatter to organize it 2015-08-06 02:47:45 +02:00			`group: getting-started`
stub out that customize page 2015-04-19 03:12:18 +02:00			`---`

Update docs to include mention of the custom variables file 2016-01-18 01:04:18 +01:00			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.
stub out that customize page 2015-04-19 03:12:18 +02:00
Update docs to include mention of the custom variables file 2016-01-18 01:04:18 +01:00			`## Customizing variables`
spec out variables customize docs 2015-06-10 01:28:09 +02:00
fixes #21072: clarify location of variables file (and avoid linking to a file that will be broken depending on the branch name) 2016-11-29 02:21:48 +01:00			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.
Update docs to include mention of the custom variables file 2016-01-18 01:04:18 +01:00
			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.
spec out variables customize docs 2015-06-10 01:28:09 +02:00
Document $enable-grid-classes variable Closes #19532 [skip sauce] 2016-03-13 17:24:34 +01:00			`\| Variable \| Values \| Description \|`
			`\| --------------------------- \| ---------------------------------- \| -------------------------------------------------------------------------------------- \|`
Update spacer utilities (#22123) * Drop -x and -y as they're all the same - Also move -width to elsewhere in the vars because it makes no sense by spacers. - Update values of -x and -y across main Sass and docs Sass. * Update docs to reflect changes; link to spacing utils from options page 2017-03-05 21:20:44 +01:00			\| `$spacer` \| `1rem` (default), or any value > 0 \| Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). \|
Document $enable-grid-classes variable Closes #19532 [skip sauce] 2016-03-13 17:24:34 +01:00			\| `$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) \| ... \|
elaborate on those classes 2016-07-27 05:21:45 +02:00			\| `$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.). \|
Document $enable-print-styles (#21474) 2016-12-31 06:31:25 +01:00			\| `$enable-print-styles` \| `true` (default) or `false` \| Enables styles for optimizing printing. \|