projects / ipfire.org.git / blame
| Commit | Line | Data |
|---|---|---|
| 91e44d91 S |
1 | --- |
| 2 | layout: docs | |
| 3 | title: Customization options | |
| 4 | description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile. | |
| 5 | group: getting-started | |
| 6 | --- | |
| 7 | ||
| 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. | |
| 9 | ||
| 10 | ## Customizing variables | |
| 11 | ||
| 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.** | |
| 13 | ||
| 14 | For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following: | |
| 15 | ||
| 16 | {% highlight scss %} | |
| 17 | // Bootstrap overrides | |
| 18 | // | |
| 19 | // Copy variables from `_variables.scss` to this file to override default values | |
| 20 | // without modifying source files. | |
| 21 | ||
| 22 | $body-bg: $gray-dark; | |
| 23 | $body-color: $gray-light; | |
| 24 | {% endhighlight %} | |
| 25 | ||
| 26 | Do the same for any variable you need to override, including the global options listed below. | |
| 27 | ||
| 28 | ## Global options | |
| 29 | ||
| 30 | You can find and customize these variables for key global options in our `_variables.scss` file. | |
| 31 | ||
| 32 | | Variable | Values | Description | | |
| 33 | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | |
| 34 | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. | | |
| 35 | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | |
| 36 | | `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | | |
| 37 | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | |
| 38 | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | |
| 39 | | `$enable-hover-media-query` | `true` or `false` (default) | ... | | |
| 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.). | | |
| 41 | | `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | |