Skip to content

Commit 87edeef

Browse files
committed
Fix up docs
1 parent 4a8a38b commit 87edeef

1 file changed

Lines changed: 14 additions & 3 deletions

File tree

site/content/docs/5.3/utilities/mixin.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,25 @@ toc: true
99

1010
## How it works
1111

12-
Bootstrap generates hundreds of utilities to quickly and easily style elements through the addition of classes in your HTML. Now with Bootstrap v5.3.0, you can add utilities in your custom Sass with the `util()` mixin. Using the [utility API]({{< docsref "/utilities/api" >}}), we generate placeholders for every utility that can be included via Sass mixin. Use the mixin in your own Sass files to include quick styles, override defaults, or compose entire components.
12+
Bootstrap generates hundreds of utilities to quickly and easily style elements through the addition of classes in your HTML. Now with Bootstrap v5.3.0, you can add utilities in your custom Sass with the `util()` mixin. Using the [utility API]({{< docsref "/utilities/api" >}}), we generate placeholders for every utility that can then be included via Sass mixin. Use the mixin in your own Sass files to include quick styles, override defaults, or compose entire components.
1313

1414
```html
15-
<!-- Utility classes -->
15+
<!-- Using utility classes -->
1616
<div class="d-inline-flex p-4 mb-md-3">...</div>
1717

18-
<!-- Utility mixin -->
18+
<!-- Using a custom class and the utility mixin -->
1919
<div class="test">...</div>
2020
```
2121

22+
```scss
23+
// Using the utility mixin in your custom Sass
24+
.test {
25+
@include util(d-inline-flex);
26+
@include util(p-4);
27+
@include util(mb-md-3);
28+
}
29+
```
30+
2231
## Motivation
2332

2433
There are two major motivations for creating the utility mixin:
@@ -94,8 +103,10 @@ Want to use only the utilities and mixin in your own project? In your project's
94103
// Required Bootstrap imports
95104
@import "bootstrap/scss/functions";
96105
@import "bootstrap/scss/variables";
106+
@import "bootstrap/scss/variables-dark";
97107
@import "bootstrap/scss/maps";
98108
@import "bootstrap/scss/mixins";
109+
@import "bootstrap/scss/root";
99110

100111
// Import the utilities maps and mixins
101112
@import "bootstrap/scss/utilities";

0 commit comments

Comments
 (0)