Add new `.rounded-pill` utility (#27339)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1e6c32adc7fea861e0cb060561ca7efa2baf42b8..e721c2a65bd5893a4af879a76bde120767866b6a 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 %}