diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 549ec03401..dea8eb5f34 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -318,6 +318,16 @@ } } +.bd-example-border-utils { + [class^="border-"] { + display: inline-block; + width: 6rem; + height: 6rem; + margin: .25rem; + background-color: #f5f5f5; + border: 1px solid; + } +} // // Code snippets diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index b47d95c977..1eb716c1f9 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -6,17 +6,32 @@ group: utilities Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. +## Border + +Add classes to an element to remove all borders or some borders. + +
+{% example html %} + + + + + +{% endexample %} +
+ ## Border-radius Add classes to an element to easily round its corners.
- Example rounded image - Example top rounded image - Example right rounded image - Example bottom rounded image - Example left rounded image - Completely round image + Example rounded image + Example top rounded image + Example right rounded image + Example bottom rounded image + Example left rounded image + Completely round image + Example non-rounded image (overrides rounding applied elsewhere)
{% highlight html %} @@ -26,4 +41,5 @@ Add classes to an element to easily round its corners. ... ... ... +... {% endhighlight %} diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b2e70aaf5a..015c9b943b 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -1,9 +1,12 @@ // -// Border-width +// Border // -// TBD...? - +.border-0 { border: 0 !important; } +.border-top-0 { border-top: 0 !important; } +.border-right-0 { border-right: 0 !important; } +.border-bottom-0 { border-bottom: 0 !important; } +.border-left-0 { border-left: 0 !important; } // // Border-radius @@ -28,3 +31,7 @@ .rounded-circle { border-radius: 50%; } + +.rounded-0 { + border-radius: 0; +}