diff options
| author | Mark Otto <markd.otto@gmail.com> | 2020-10-30 23:42:11 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-30 23:42:11 +0300 |
| commit | 241f910dc51d164b0049bd1e50a7e85835bc55c5 (patch) | |
| tree | 5f1f8835c83b1a245f484d7e536a061294adecd2 /site/content | |
| parent | a108e2bbf821219a85d747fa2677cc9dde6432f1 (diff) | |
Updated .rounded utilities (#31687)
* 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>
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.0/utilities/borders.md | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md index ec2a7cbc04..ceb140ecb7 100644 --- a/site/content/docs/5.0/utilities/borders.md +++ b/site/content/docs/5.0/utilities/borders.md @@ -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 >}} |