]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Fix up docs
authorMark Otto <markdotto@gmail.com>
Sat, 25 Mar 2023 03:20:38 +0000 (22:20 -0500)
committerMark Otto <markdotto@gmail.com>
Sat, 25 Mar 2023 03:20:38 +0000 (22:20 -0500)
site/content/docs/5.3/utilities/mixin.md

index b4798b281e86c261f86e79289a5cc6397760eccd..88b05fb9c0d0d01341e67839104f5a71ef5e7ce0 100644 (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";