0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/docs/4.0/getting-started/options.md

43 lines
2.9 KiB
Markdown
Raw Normal View History

2015-04-19 03:12:18 +02:00
---
layout: docs
2015-08-10 19:05:38 +02:00
title: Customization options
description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
group: getting-started
toc: true
2015-04-19 03:12:18 +02:00
---
## Customizing variables
2015-06-10 01:28:09 +02: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.**
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
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 `npm run test` as needed.
You can find and customize these variables for key global options in our `_variables.scss` file.
2015-06-10 01:28:09 +02:00
| 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) | ... |
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.). |
2016-12-31 06:31:25 +01:00
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |