Skip to content

Utility class border radius #30048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JensLuyten wants to merge 4 commits into from
Closed

Utility class border radius #30048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2861ae5
Add new classname & values for border radius utility class
JensLuyten Jan 17, 2020
e8a1b65
Docs: Add updated border-radius utility to migration page
JensLuyten Jan 17, 2020
8bee335
Docs: Update docs pages with new border-radius utility class
JensLuyten Jan 17, 2020
a861870
Shorten border-radius utility class to .br
JensLuyten Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,36 +443,38 @@ $utilities: map-merge(
class: font,
values: (monospace: $font-family-monospace)
),
"rounded": (
"border-radius": (
property: border-radius,
class: rounded,
class: br,
responsive: true,
values: (
null: $border-radius,
sm: $border-radius-sm,
lg: $border-radius-lg,
0: 0,
1: $border-radius-sm,
2: $border-radius,
3: $border-radius-lg,
circle: 50%,
pill: $rounded-pill,
0: 0,
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
class: br-top,
values: (null: $border-radius)
),
"rounded-right": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-right,
class: br-right,
values: (null: $border-radius)
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
class: br-bottom,
values: (null: $border-radius)
),
"rounded-left": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-left,
class: br-left,
values: (null: $border-radius)
),
"visibility": (
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/4.3/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ Use our background utility classes to quickly change the appearance of a badge.

## Pill badges

Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
Use the `.br-pill` utility class to make badges more rounded with a larger `border-radius`.

{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
<span class="badge br-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
6 changes: 3 additions & 3 deletions site/content/docs/4.3/components/list-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,15 +152,15 @@ Add badges to any list group item to show unread counts, activity, and more with
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge bg-primary rounded-pill">14</span>
<span class="badge bg-primary br-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge bg-primary rounded-pill">2</span>
<span class="badge bg-primary br-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge bg-primary rounded-pill">1</span>
<span class="badge bg-primary br-pill">1</span>
</li>
</ul>
{{< /example >}}
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/4.3/examples/carousel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,19 @@ <h1>One more for good measure.</h1>
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="#777" color="#777" class="br-circle" >}}
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="#777" color="#777" class="br-circle" >}}
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="#777" color="#777" class="br-circle" >}}
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/4.3/examples/checkout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2>Checkout form</h2>
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge bg-secondary rounded-pill">3</span>
<span class="badge bg-secondary br-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/4.3/examples/offcanvas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
<span class="badge bg-light text-dark br-pill align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
Expand Down
2 changes: 2 additions & 0 deletions site/content/docs/4.3/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12`. [See #28874](https://github.com/twbs/bootstrap/pull/28874).
- New `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
- Added `.bg-body` for quickly setting the `<body>`'s background to additional elements.
- Renamed the `.rounded` utility class to `.br`. See [here]({{< docsref "/utilities/borders#border-radius" >}}).
- Removed `.rounded-sm` and `.rounded-lg`, replaced them with new border-radius utilities (`.br-0`, `.br-1`, `.br-2`, `.br-3`) See [here]({{< docsref "/utilities/borders#sizes" >}}).
- **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
- **Todo:** Split utilities into property-value utility classes and helpers

Expand Down
24 changes: 13 additions & 11 deletions site/content/docs/4.3/utilities/borders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,24 @@ Change the border color using utilities built on our theme colors.
Add classes to an element to easily round its corners.

{{< example >}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
{{< 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)" >}}
{{< placeholder width="75" height="75" class="br" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="br-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="br-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="br-bottom" title="Example bottom rounded image" >}}
{{< placeholder width="75" height="75" class="br-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="br-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="br-pill" title="Rounded pill image" >}}
{{< placeholder width="75" height="75" class="br-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
{{< /example >}}


## Sizes

Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
Use the border-radius factors for larger or smaller border-radius sizes. Sizes range from `0` to `3`.

{{< example >}}
{{< 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="br-0" title="Example non-rounded image" >}}
{{< placeholder width="75" height="75" class="br-1" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="br-2" title="Example default rounded image" >}}
{{< placeholder width="75" height="75" class="br-3" title="Example large rounded image" >}}
{{< /example >}}