From 87edeeff138c7d729c1d2c632f66b9f9c787ddc3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 24 Mar 2023 22:20:38 -0500 Subject: [PATCH] Fix up docs --- site/content/docs/5.3/utilities/mixin.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.3/utilities/mixin.md b/site/content/docs/5.3/utilities/mixin.md index b4798b281e..88b05fb9c0 100644 --- a/site/content/docs/5.3/utilities/mixin.md +++ b/site/content/docs/5.3/utilities/mixin.md @@ -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 - +
...
- +
...
``` +```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"; -- 2.47.2