diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index 835caabd7d94178c9dcdcaca86cd993aecbaeb45..2625e818bc9387da1b720870b930fa24f98c6265 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -55,6 +55,7 @@ - title: Utilities pages: + - title: Borders - title: Clearfix - title: Close icon - title: Colors diff --git a/docs/content/images.md b/docs/content/images.md index b710fcfc508f8ad9b75ba72db597571941042be8..706badf7b98ae8debe45146091bd1709cca9b487 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -29,19 +29,15 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. {% endcallout %} -## Image shapes +## Image thumbnails -Add classes to an `<img>` element to easily style images in any project. +In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance. <div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible"> <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> </div> {% highlight html %} -<img src="..." alt="..." class="rounded"> -<img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> {% endhighlight %} diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md new file mode 100644 index 0000000000000000000000000000000000000000..b47d95c9779e116d1f2cd92c91dce7933a206f88 --- /dev/null +++ b/docs/utilities/borders.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Borders +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-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"> +</div> + +{% highlight html %} +<img src="..." alt="..." class="rounded"> +<img src="..." alt="..." class="rounded-top"> +<img src="..." alt="..." class="rounded-right"> +<img src="..." alt="..." class="rounded-bottom"> +<img src="..." alt="..." class="rounded-left"> +<img src="..." alt="..." class="rounded-circle"> +{% endhighlight %} diff --git a/scss/_images.scss b/scss/_images.scss index ba82c211918dbe7bb82b35d1625fa9187e3a3825..3ca811ecd9434d80fa6ed735a3bee805c8dbc122 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -9,10 +9,6 @@ @include img-fluid(); } -// Rounded corners -.rounded { - @include border-radius($border-radius-lg); -} // Image thumbnails .img-thumbnail { @@ -27,11 +23,6 @@ @include img-fluid(inline-block); } -// Perfect circle -.img-circle { - border-radius: 50%; -} - // // Figures // diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 87b8ba6da7ee34725099407327827ac56f470067..8d9ff7cecc5a435cc9831cc607c27ddc55b7a017 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,4 +1,5 @@ @import "utilities/background"; +@import "utilities/borders"; @import "utilities/clearfix"; @import "utilities/display"; @import "utilities/flex"; diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss new file mode 100644 index 0000000000000000000000000000000000000000..b2e70aaf5ad640b14ba42ada3cf2fd046b3465ef --- /dev/null +++ b/scss/utilities/_borders.scss @@ -0,0 +1,30 @@ +// +// Border-width +// + +// TBD...? + + +// +// Border-radius +// + +.rounded { + @include border-radius($border-radius); +} +.rounded-top { + @include border-top-radius($border-radius); +} +.rounded-right { + @include border-right-radius($border-radius); +} +.rounded-bottom { + @include border-bottom-radius($border-radius); +} +.rounded-left { + @include border-left-radius($border-radius); +} + +.rounded-circle { + border-radius: 50%; +}