Bootstrap: Confusing classes `rounded-sm` and `rounded-lg`

[tpaksu]

Hello,

I think there might be a cause of misunderstanding, which I experienced now about the rounded-lg and rounded-sm classes, because when I saw rounded-lg, I instantly got the message that the element edges should be rounded when the screen size is greater than md dimensions.

How about using .rounded-lg, .rounded-md, .rounded-sm, .rounded-xl as they are meant to be as breakpoint definers and add .rounded-1, .rounded-2, rounded-3 like size definitions as they are in p-1, p-2 (padding) definitions?

Use case: For example jumbotron uses exactly this, on screens smaller than lg it has no border-radus, and larger than md, it has. Why don't we have something like this for example like the card-img? We can add rounded-0 rounded-lg to achieve this easily. rounded-lg-1 would be delicious too.

[mdo]

Yeah, I agree with you on that. Would like to revamp and rename to .radius-* or .border-radius-*, with a 1-5 scale a la padding and margin utilities. Unsure about making them responsive, but since that's a flag in the utilities API, I think that's okay.

[tpaksu]

@mdo thank you for your comment, and about the responsivity, IMHO the responsive behaviour of jumbotron (width >= md : rounded + padded, width < md : edged + snapped) can't be copied to other elements without using custom styles, with the responsivity feature added to border-radius, I think it'll be possible with something like this:

<img class='rounded-0 p-0 rounded-md-2 p-md-3'>

And yes, adding new class names would prevent unwanted effects to previous designs. :+1: for that. I would prefer .border-radius-* because it seems more clear to the reader.

[jameswilson]

For anyone looking for a way to extend current bootstrap 4 rounded functionality, so that you can disable rounded corners at-or-below a certain breakpoint. Give this a try in your custom theme's SCSS:

@import "~bootstrap/scss/mixins/breakpoints";
.rounded-0 {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        border-radius: 0 !important;
      }
    }
  }
}

Will generate the following css:

@media (max-width: 575.98px) {
  .rounded-0-sm {
    border-radius: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .rounded-0-md {
    border-radius: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .rounded-0-lg {
    border-radius: 0 !important;
  }
}

@media (max-width: 1199.98px) {
  .rounded-0-xl {
    border-radius: 0 !important;
  }
}

.rounded-0 {
  border-radius: 0 !important;
}

And then you can combine this with a rounded class to effectively have rounded corners on larger screens, and square corners on smaller screens.

My immediate use case was for images where on large screens we want some soft corners, but on mobile we want to pull the image outside the left/right gutters and go full edge-to-edge, without any rounded corners.

<img src=""  class="rounded-sm rounded-0-sm">

This code looks horribly confusing, but it does what is intended:

• use the smaller rounded corners (rounded-sm)
• but then disable the rounded corners before reaching the 'md' breakpoint. (rounded-0-sm)

Possibly, a maintainer could use or adapt this code snippet when the refactoring to stop using sm and lg on rounded corners to define the radius.

HTH