diff options
| author | Mark Otto <[email protected]> | 2016-11-26 16:49:07 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-11-26 16:49:07 -0800 |
| commit | f7f5547dab499e00301afec1154c85bd2f22faa3 (patch) | |
| tree | 6a73361ecca6c2a3591f02932d3967185a2ef98b /docs | |
| parent | 36bf06f520cf1bf9cb09ce5d3cd46300ffbba19e (diff) | |
| parent | dc52029beaff899242bdff8e9c00a932959609ba (diff) | |
| download | bootstrap-f7f5547dab499e00301afec1154c85bd2f22faa3.tar.xz bootstrap-f7f5547dab499e00301afec1154c85bd2f22faa3.zip | |
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/scss/_component-examples.scss | 10 | ||||
| -rw-r--r-- | docs/utilities/borders.md | 28 |
2 files changed, 32 insertions, 6 deletions
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 549ec0340..dea8eb5f3 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 b47d95c97..1eb716c1f 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. + +<div class="bd-example-border-utils"> +{% example html %} +<span class="border-0"></span> +<span class="border-top-0"></span> +<span class="border-right-0"></span> +<span class="border-bottom-0"></span> +<span class="border-left-0"></span> +{% endexample %} +</div> + ## Border-radius Add classes to an element to easily round its corners. <div class="bd-example bd-example-images"> - <img data-src="holder.js/100x100" class="rounded" alt="Example rounded image"> - <img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image"> - <img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image"> - <img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image"> - <img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image"> - <img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image"> + <img data-src="holder.js/75x75" class="rounded" alt="Example rounded image"> + <img data-src="holder.js/75x75" class="rounded-top" alt="Example top rounded image"> + <img data-src="holder.js/75x75" class="rounded-right" alt="Example right rounded image"> + <img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image"> + <img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image"> + <img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image"> + <img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)"> </div> {% highlight html %} @@ -26,4 +41,5 @@ Add classes to an element to easily round its corners. <img src="..." alt="..." class="rounded-bottom"> <img src="..." alt="..." class="rounded-left"> <img src="..." alt="..." class="rounded-circle"> +<img src="..." alt="..." class="rounded-0"> {% endhighlight %} |