improve additive/subtractive border util docs

This commit is contained in:
Mark Otto 2018-01-01 20:51:20 -08:00
parent 750291b251
commit dccd0037d8
2 changed files with 16 additions and 2 deletions

View File

@ -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;
}
}

View File

@ -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>