2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00

docs: switch to fenced codeblocks (#31806)

This commit is contained in:
XhmikosR
2020-10-19 12:56:49 +03:00
committed by GitHub
parent 48177c946f
commit e6618a6ebb
43 changed files with 494 additions and 446 deletions
+8 -8
View File
@@ -121,33 +121,33 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
{{< highlight html >}}
```html
<div class="container">
<!-- Content here -->
</div>
{{< /highlight >}}
```
## Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
{{< highlight html >}}
```html
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
{{< /highlight >}}
```
## Fluid containers
Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
{{< highlight html >}}
```html
<div class="container-fluid">
...
</div>
{{< /highlight >}}
```
## Sass
@@ -157,7 +157,7 @@ As shown above, Bootstrap generates a series of predefined container classes to
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
{{< highlight scss >}}
```scss
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
@@ -171,6 +171,6 @@ In addition to customizing the Sass, you can also create your own containers wit
.custom-container {
@include make-container();
}
{{< /highlight >}}
```
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" >}}).