diff options
| -rw-r--r-- | assets/scss/_component-examples.scss | 7 | ||||
| -rw-r--r-- | docs/4.0/utilities/borders.md | 11 |
2 files changed, 16 insertions, 2 deletions
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index 7c2d2618b..6c5c7c5d9 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -357,7 +357,12 @@ height: 5rem; margin: .25rem; background-color: #f5f5f5; - border: 1px solid; + } +} + +.bd-example-border-utils-0 { + [class^="border"] { + border: 1px solid $border-color; } } diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md index 2304efcd4..ac865e5d9 100644 --- a/docs/4.0/utilities/borders.md +++ b/docs/4.0/utilities/borders.md @@ -9,7 +9,9 @@ toc: true ## Border -Add classes to an element to add or remove all borders or some borders. +Use border utilities to add or remove an element's borders. Choose from all borders or one at a time. + +### Additive <div class="bd-example-border-utils"> {% example html %} @@ -18,6 +20,13 @@ Add classes to an element to add or remove all borders or some borders. <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></span> +{% endexample %} +</div> + +### Subtractive + +<div class="bd-example-border-utils bd-example-border-utils-0"> +{% example html %} <span class="border-0"></span> <span class="border-top-0"></span> <span class="border-right-0"></span> |