Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
options.md 2.85 KB
Newer Older
Mark Otto's avatar
stub out that customize page  
Mark Otto committed
1 
---
Mark Otto's avatar
Massive cleanup    
Mark Otto committed
2 
layout: docs
Mark Otto's avatar
tweak options, renamed from customize    
Mark Otto committed
3 
title: Customization options
Mark Otto's avatar
v4: Social meta tags (#20825)    
Mark Otto committed
4 
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
Mark Otto's avatar
restore page headers, use partial and page frontmatter to organize it    
Mark Otto committed
5 
group: getting-started
Mark Otto's avatar
stub out that customize page  
Mark Otto committed
6
7 
---
Mark Otto's avatar
Update docs to include mention of the custom variables file    
Mark Otto committed
8 
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.
Mark Otto's avatar
stub out that customize page  
Mark Otto committed
9
Mark Otto's avatar
Update docs to include mention of the custom variables file    
Mark Otto committed
10 
## Customizing variables
Mark Otto's avatar
spec out variables customize docs    
Mark Otto committed
11
Mark Otto's avatar
fixes #21072: clarify location of variables file (and avoid linking to a file...    
Mark Otto committed
12 
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.**
Mark Otto's avatar
Update docs to include mention of the custom variables file    
Mark Otto committed
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 

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.
Mark Otto's avatar
spec out variables customize docs    
Mark Otto committed
31
David Lormor's avatar
Document $enable-grid-classes variable    
David Lormor committed
32
33 
| Variable                    | Values                             | Description                                                                            |
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
34 
| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). |
David Lormor's avatar
Document $enable-grid-classes variable    
David Lormor committed
35
36
37
38
39 
| `$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)        | ...                                                                                    |
Mark Otto's avatar
elaborate on those classes    
Mark Otto committed
40 
| `$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.).     |
Quy's avatar
Document $enable-print-styles (#21474)    
Quy committed
41 
| `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |