diff options
| author | Mark Otto <[email protected]> | 2018-01-01 20:51:20 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-01-01 20:51:20 -0800 |
| commit | dccd0037d82de02add2f28d9208dcb00687428a4 (patch) | |
| tree | ab1a0357c64947289ce2d7baf77ddeb59ae2cc17 | |
| parent | 750291b251b303ae368d299671087b26703d664b (diff) | |
| download | bootstrap-dccd0037d82de02add2f28d9208dcb00687428a4.tar.xz bootstrap-dccd0037d82de02add2f28d9208dcb00687428a4.zip | |
improve additive/subtractive border util docs
| -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> |