mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-29 08:10:47 +02:00
Docs: consistent usage of CSS sections (#38219)
Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
@@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
|
||||
|
||||
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
|
||||
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
|
||||
|
||||
## Media queries
|
||||
|
||||
|
@@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of
|
||||
</div>
|
||||
```
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Sass variables
|
||||
|
||||
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
|
||||
|
||||
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
|
||||
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
|
||||
|
||||
### Sass mixins
|
||||
|
||||
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
|
||||
|
||||
```scss
|
||||
@@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit
|
||||
@include make-container();
|
||||
}
|
||||
```
|
||||
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
|
||||
|
@@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together:
|
||||
|
||||
- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
|
||||
|
||||
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
|
||||
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
|
||||
|
||||
Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
|
||||
|
||||
|
Reference in New Issue
Block a user