diff --git a/scss/_variables.scss b/scss/_variables.scss index 1e6c32adc7fea861e0cb060561ca7efa2baf42b8..e721c2a65bd5893a4af879a76bde120767866b6a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -244,6 +244,8 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$rounded-pill: 50rem !default; + $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b8832ef728241e0cecb5ae33b7298f5fed1205a7..fb759c9ba017827714c279b37e49559011a4d7a5 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -54,6 +54,10 @@ border-radius: 50% !important; } +.rounded-pill { + border-radius: $rounded-pill !important; +} + .rounded-0 { border-radius: 0 !important; } diff --git a/site/docs/4.1/utilities/borders.md b/site/docs/4.1/utilities/borders.md index e67cc41c9e809595151fe639bd6ccb9397946c97..c0f68eb5829d328278bd1f75488fa417da819992 100644 --- a/site/docs/4.1/utilities/borders.md +++ b/site/docs/4.1/utilities/borders.md @@ -61,6 +61,7 @@ Add classes to an element to easily round its corners. <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/150x75" class="rounded-pill" alt="Rounded pill image"> <img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)"> </div> @@ -71,5 +72,6 @@ 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-pill"> <img src="..." alt="..." class="rounded-0"> {% endhighlight %}