Why does Bootstrap use “btn” classes?

[henrydaggett]

When creating a <button>, why does bootstrap use btn and btn-* classes?

We already know that we are making a <button> thanks to the html tag, so why not just structure classes more simply like:

<button class=“primary lg”>

I suppose the same question can be asked for badges, alerts and icons.

[mdo]

This is a super old post from me, but it hits at the heart of it: https://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/. A talk I last gave years ago also explains the approach even more: https://speakerdeck.com/mdo/at-mdo-ular-css. And then there's https://getbootstrap.com/docs/4.5/extend/approach/#classes.

Bottom line, .primary is meaningless without btn- in front of it. Attaching it to button.primary makes the class more specific, or more difficult to override later.