Bootstrap: How to add buttons of sizes other than medium in navbar (and keep vertical alignment)?

[niftylettuce]

Code:

<li class="nav-item"><a class="btn btn-outline-secondary bg-inverse btn-sm">Support</a></li>
<li class="nav-item"><a class="btn btn-outline-secondary bg-inverse">Log in</a></li>
<li class="nav-item"><a class="btn btn-outline-secondary bg-inverse">Sign up</a></li>

Screenshot:

Expected output:

It should align vertically and doesn't. Not sure how to write it, couldn't find docs for this.

cc @mdo

[cvrebert]

Can't say I understand why you'd want to mix button sizes within a navbar like this in the first place.

[rafalp]

I wouldn't assume mixing as much as option to use smaller buttons in navbar instead of default ones for cosmetic reasons/or to fit more in case of apps.

[niftylettuce]

Correct @rafalp exactly

[fuzzy76]

Not to mention logos. The default navbar height is a bit small for a site logo.

[mdo]

In general, I'm in support of easier vertical alignment of navbar contents :). I'll take a look soon.

[fuzzy76]

:+1: The docs also mentions ".navbar-nav for a full-height and lightweight navigation". I'm not sure what "full-height" is supposed to mean in this context.

[mdo]

Small example of using utilities to tweak this added in #19890.

[fuzzy76]

My wish for being able to use a larger logo and have a vertically centered nav inside the same navbar does not seem covered by this. Should I open a separate issue?

[mdo]

@fuzzy76 For that, you're likely going to have to use custom styles to account for the larger image. In our default, non-flexbox version that's rather difficult to account for in a generic sense.