Bootstrap: Responsive .rounded-*-* classes.

[jonnysp]

extend the round borders for switch the media breakpoints

//
// Border
//

.border-0        { border: 0 !important; }
.border-top-0    { border-top: 0 !important; }
.border-right-0  { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0   { border-left: 0 !important; }

//
// Border-radius
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .rounded#{$infix}        { @include border-radius($border-radius); }
    .rounded#{$infix}-top    { @include border-top-radius($border-radius); @include border-bottom-radius(0); }
    .rounded#{$infix}-right  { @include border-right-radius($border-radius); @include border-left-radius(0); }
    .rounded#{$infix}-bottom { @include border-bottom-radius($border-radius); @include border-top-radius(0); }
    .rounded#{$infix}-left   { @include border-left-radius($border-radius); @include border-right-radius(0); }
    .rounded#{$infix}-circle { border-radius: 50%; }
    .rounded#{$infix}-0 {  border-radius: 0;    }

  }
}

[nextgenthemes]

Why?

[jonnysp]

you can make elements like a navbar on large screen with round corners and on small screen without them
or
you can make cards on large screen with image on left side have "rounded-lg-left" on small screen is the image on top you can reset the corners "rounded-sm-top"

and it is simular to the other utilities eg margins , paddings, display ....

[mdo]

Thanks, but we'll pass on this.

[jordanambra]

I'm not sure if you look at closed issues, but I have a use case for this. On a smaller screen, I would have a form's button be below the input field and would want rounded bottom corners. On a larger screen it would be inline and I would want rounded right corners.

[cersos]

I could use this as well.

Use Case: I have a row of buttons that butts up to one another horizontally on a large screen. Looks best with no rounding, maybe on the first and last. On a smaller screen, I'd like the rounding to be dynamic.

[leegellie]

Thanks. Awesome.

[anthony0030]

+1

[simondrabble]

I could use this as well. On desktop screens nav list items look nicer with rounded top corners, but when collapsed on smaller screens only the top element should have the rounding applied. @mdo can you expand on your reasons for passing?

[lauracabre]

I have the same use case need as @cersos above.

[mdo]

can you expand on your reasons for passing?

At the time I decided this, the primary reason was one of usage and file size, which I think still apply today. Not that many people want this, and the expansion from today's classes across five built-in breakpoints is a significant jump.

Always happy to revisit past decisions, and in v5 we'll have a new utility API to customize. Keep the feedback coming.

[edflips]

Tailwind has utilities like this which are both really useful, but also make their package quite large.

This isn't such a problem when using their project with a package manager as you can use something like Purgecss to remove unused classes, but in the case of Bootstrap I can understand why they haven't made every utility class responsive as it could become unwieldy quickly!

[jonnysp]

in V5 you can this enable.

by modify the _untilities.scss

add under the rounded* sections the responsive: true option
modify the value names under rounded sm -> narrow and lg -> far

see example
https://jsfiddle.net/jonnysp/0y4t8v5g/

the bootstrap.css is 3 KB bigger and the bootstrap.min.css only 2 KB