Utilizing Bootstrap 5.3.1, I have successfully implemented responsive borders using the Utility API. My CSS file includes classes such as .rounded-top-sm-4 and .rounded-end-sm-4.
# utilities_custom.scss
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/variables-dark";
@import "bootstrap/maps";
@import "bootstrap/mixins";
@import "bootstrap/utilities";
$utilities: map-merge(
$utilities, (
"rounded": map-merge(
map-get($utilities, "rounded"),
( responsive: true ),
),
"rounded-top": map-merge(
map-get($utilities, "rounded-top"),
( responsive: true ),
),
"rounded-bottom": map-merge(
map-get($utilities, "rounded-bottom"),
( responsive: true ),
),
...
My Markup:
<div class="card border-0 mt-5">
<div class="row justify-content-center g-0 fs-4">
<div class="test col-md-4 rounded-4 rounded-end-md-0 rounded-bottom-sm-0">
<div class="card-body p-5">
<p class="card-text">...</p>
</div>
</div>
<div class="col-md-4">
<img src="..." class="img-fluid" alt="...">
</div>
</div>
</div>
Desired Outcome:
- For medium screens, I intend for
.testto have aradius-4on the top-left and bottom-left corners. - For small screens, I want
.testto have aradius-4on the top-left and top-right corners.
Current Outcome:
- On medium screens, only the top-left corner has a
radius-4, the other corners are radius 0. - On small screens, all corners have a
radius-4.
What mistake have I made? Thank you.