rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Docs: precise how to add new .order-* classes in 'Layout > Columns' (#40821)

Browse Source 
Co-authored-by: Tobi <TobiGr@users.noreply.github.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
This commit is contained in:
Julien Déramond 2024-10-09 17:03:55 +02:00 committed by GitHub
parent fee9dc2438
commit 15c1324d9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/content/docs/5.3/layout/columns.md
View File

@ -203,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
### Order classes
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
{{< example class="bd-example-row" >}}
<div class="container text-center">
@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
</div>
{{< /example >}}
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
```scss
$utilities: map-merge(
$utilities,
(
"order": map-merge(
map-get($utilities, "order"),
(
values: map-merge(
map-get(map-get($utilities, "order"), "values"),
(
6: 6, // Add a new `.order-{breakpoint}-6` utility
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
)
),
),
),
)
);
```
### Offsetting columns
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.