mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 14:54:27 +02:00
Code Issues Releases Wiki Activity

Updated .rounded utilities (#31687)

Browse Source 
* Updated rounded utilities to fix scale, but not rename anything else

* Rename rounded-pill to border-radius-pill to match

Also reorder some variables while I'm here to make more sense

* Updated rounded utilities to fix scale, but not rename anything else

* Rename rounded-pill to border-radius-pill to match

Also reorder some variables while I'm here to make more sense

* Small copy addition

* Add example modifier class for spacing

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
2020-10-30 13:42:11 -07:00
committed by GitHub
parent a108e2bbf8
commit 241f910dc5
3 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
site/content/docs/5.0/utilities/borders.md
View File

@@ -43,7 +43,7 @@ Change the border color using utilities built on our theme colors.
<span class="border border-white"></span>
{{< /example >}}
### Border-width
## Border-width
{{< example class="bd-example-border-utils" >}}
<span class="border border-1"></span>
@@ -65,15 +65,15 @@ Add classes to an element to easily round its corners.
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
{{< /example >}}
### Sizes
## Sizes
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`, and can be configured by modifying the utilities API.
{{< example class="bd-example-rounded-utils" >}}
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
{{< /example >}}