kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
sts-ryan-holton 2018-11-05 17:19:00 +00:00 committed by XhmikosR
parent 5c03f23f85
commit 89eef046ef
3 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_variables.scss
View File

@ -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;

4
scss/utilities/_borders.scss
View File

@ -54,6 +54,10 @@
border-radius: 50% !important;
}
.rounded-pill {
border-radius: $rounded-pill !important;
}
.rounded-0 {
border-radius: 0 !important;
}

2
site/docs/4.1/utilities/borders.md
View File

@ -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 %}