You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/content/docs/5.3/utilities/mixin.md
+14-3Lines changed: 14 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,16 +9,25 @@ toc: true
9
9
10
10
## How it works
11
11
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.
13
13
14
14
```html
15
-
<!--Utility classes -->
15
+
<!--Using utility classes -->
16
16
<divclass="d-inline-flex p-4 mb-md-3">...</div>
17
17
18
-
<!--Utility mixin -->
18
+
<!--Using a custom class and the utility mixin -->
19
19
<divclass="test">...</div>
20
20
```
21
21
22
+
```scss
23
+
// Using the utility mixin in your custom Sass
24
+
.test {
25
+
@includeutil(d-inline-flex);
26
+
@includeutil(p-4);
27
+
@includeutil(mb-md-3);
28
+
}
29
+
```
30
+
22
31
## Motivation
23
32
24
33
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
0 commit comments