Consider updating design of badges component

The current badges component with the contextual variants (https://getbootstrap.com/docs/4.1/components/badge/#contextual-variations) are considerably small with weird vertical positioning. I usually tend to overwrite the padding on these badges using my own styling as I feel they’re a little too small. I’ve made a few minor tweaks to the current CSS and shall provide two screenshots with some code of what’s different, what do you guys think?

Before:

After:

Code edits:

.badge {
    padding: .4em .9em;
    /* line-height: 1; */
}

Thoughts?

[mdo]

Main issue here is Segoe UI sits far too low on the x-height, so the vertical alignment of the text within looks incorrect.

[MartijnCuppens]

I think they’re ok like they are now. Badges are frequently used in buttons and navs and do not need more padding there.

If we’re going to increase the padding, they look more like the .btn.btn-sm buttons.