Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Oct 9, 2024
29 changes: 28 additions & 1 deletion site/content/docs/5.3/layout/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -239,6 +239,33 @@ 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" >}}) for details.

```scss
$utilities: map-merge(
$utilities,
(
"order":
(
responsive: true,
property: order,
// Keep the existing `.order-*` utilities
values: (
first: -1,
0: 0,
1: 1
2: 2,
3: 3,
4: 4,
5: 5,
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.
Expand Down
Loading