Bootstrap: Rename .img-rounded to .rounded

[simonurmi]

I suggest changing .img-rounded to just plain .rounded, as .img-rounded only applies border-radius, and can be applied to any element anyways. However, it's a bit awkward to add .img-rounded to an element that is not <img>.

[rafalp]

What you need to be wary of when doing changes like that is that they tend to turn into api bloat unexpectedly and quickly, ergo, leading to .rounded-sm, .rounded-lg kind of stuff and then to ".btn .btn-primary .btn-lg .rounded-lg radius incorrect!" kind of issues and maintenance burden.

IMHO if you need .radius class you should define custom one instead and keep .img-rounded class around for explicit use for rounded images.

[simonurmi]

I wasn't suggesting adding more classes to bloat the code. I was suggesting renaming an already existing class to be more versatile. To be able to add rounded corners to any element that can have a background-color or a border. div or it's more semantic cousins, forms, lists...

I didn't suggest separating border-radius from buttons. Having rounded-lg and rounded-sm is not a terrible idea though. Let the button have it's border-radius, and override it with the rounding you prefer. .btn-lg.rounded-sm? Cool.

Also, if $enable-rounded is set to false, having a class to set border-radius on certain elements could be useful.

[rafalp]

The point I was making is that when change API in such manner it may lead others to request futher changes and cause it grow organically and get bloated. The buttons was only example of one way in which it may be abused.

[mdo]

I dig it—it's a utility class and it should be treated as such.

[judetucker]

Do you think that .img-circle or .img-thumbnail (also in _images.scss) should receive the same treatment for consistency?

[simonurmi]

I can see some uses for .circle, such as a circular button or text block, but those would require having equal width and height. Although, aesthetically speaking, a non-square image with border-radius: 50% doesn't look very good either. It's a tough one, but I'm slightly on the side of changing .img-circle to .circle for consistency and potential uses, and leaving it as .img-circle feels like it's restricting where it can be used.

Thumbnail as a word would be strange to use outside the context of images. However, being able to style for example, a text block, to look the same as image thumbnails could be useful.

TL;DR; having .img- in the front makes it seem like the classes are only to be used with images

[mdo]

More changes coming in #20684.