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 ### 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" >}} {{< example class="bd-example-row" >}}
<div class="container text-center"> <div class="container text-center">
@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
</div> </div>
{{< /example >}} {{< /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 ### 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. 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.