rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

add border color utilities

Browse Source
This commit is contained in:
Mark Otto 2017-06-25 18:39:00 -07:00
parent f8d61218ca
commit 9bfbee3503
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/scss/_component-examples.scss
View File

@ -363,10 +363,10 @@
} }
.bd-example-border-utils { .bd-example-border-utils {
[class^="border-"] { [class^="border"] {
display: inline-block; display: inline-block;
width: 6rem; width: 5rem;
height: 6rem; height: 5rem;
margin: .25rem; margin: .25rem;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid; border: 1px solid;

12
docs/4.0/utilities/borders.md
View File

@ -13,6 +13,7 @@ Add classes to an element to remove all borders or some borders.
<div class="bd-example-border-utils"> <div class="bd-example-border-utils">
{% example html %} {% example html %}
<span class="border"></span>
<span class="border-0"></span> <span class="border-0"></span>
<span class="border-top-0"></span> <span class="border-top-0"></span>
<span class="border-right-0"></span> <span class="border-right-0"></span>
@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders.
{% endexample %} {% endexample %}
</div> </div>
## Border color
Change the border color using utilities built on our theme colors.
<div class="bd-example-border-utils">
{% example html %}
{% for color in site.data.theme-colors %}
<span class="border border-{{ color.name }}"></span>{% endfor %}
{% endexample %}
</div>
## Border-radius ## Border-radius
Add classes to an element to easily round its corners. Add classes to an element to easily round its corners.

7
scss/utilities/_borders.scss
View File

@ -2,12 +2,19 @@
// Border // Border
// //
.border { border: 1px solid $gray-200 !important; }
.border-0 { border: 0 !important; } .border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; } .border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; } .border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
@each $color, $value in $theme-colors {
.border-#{$color} {
border-color: $value !important;
}
}
// //
// Border-radius // Border-radius
// //