CODEWITHSUNDEEP
twitter-bootstrap
tofutim
tofutim

Reputation: 23384

Vertically center btn-group in Bootstrap 3 Navbar

I would like a btn-group to be vertically centered in the navbar using Bootstrap 3. Currently the alignment is that the bottom of the btn-group matches the bottom of the text.

Upvotes: 0

Views: 435

Answers (1)

LSpencer777
LSpencer777

Reputation: 1779

Using the source-code (non-compiled) version of Bootstrap, I added this to my .less file. It has the effect of computing the proper margin-top and margin-bottom for the btn(s) inside the btn-group.

.nav > li > div.btn-group > .btn {
    .navbar-vertical-align(@line-height-computed+@padding-base-vertical*2+2/*for top and bottom border, which Bootstrap hard-codes as 1px*/);
}

Here is how .navbar-vertical-align is defined in mixins.less:

.navbar-vertical-align(@element-height) {
    margin-top: ((@navbar-height - @element-height) / 2);
    margin-bottom: ((@navbar-height - @element-height) / 2);
}

Upvotes: 1

Related Questions