mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00
Code Issues Releases Wiki Activity

Fix up docs

Browse Source
This commit is contained in:
Mark Otto
2023-03-24 22:20:38 -05:00
parent 4a8a38bb30
commit 87edeeff13
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
site/content/docs/5.3/utilities/mixin.md
View File

@@ -9,16 +9,25 @@ toc: true
## How it works
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.
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.
```html
<!-- Utility classes -->
<!-- Using utility classes -->
<div class="d-inline-flex p-4 mb-md-3">...</div>
<!-- Utility mixin -->
<!-- Using a custom class and the utility mixin -->
<div class="test">...</div>
```
```scss
// Using the utility mixin in your custom Sass
.test {
@include util(d-inline-flex);
@include util(p-4);
@include util(mb-md-3);
}
```
## Motivation
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
// Required Bootstrap imports
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// Import the utilities maps and mixins
@import "bootstrap/scss/utilities";