mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
eb2e1102be
* remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
41 lines
2.7 KiB
Markdown
41 lines
2.7 KiB
Markdown
---
|
|
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 for our spacer utilities. |
|
|
| `$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.). |
|