TAGS :Viewed: 5 - Published at: a few seconds ago

[ Vertically align list items in bootstrap navbar with a set height ]

I have a navbar in bootstrap but the list items are stuck to the top when a height is set. Is there a more fluid way of centering them vertically without using margin-top.

BOOTPLY http://www.bootply.com/Ua9pFtsUDv

Answer 1

I would suggest padding the links, like so:

@media (min-width: 768px){

    .navbar-nav>li>a {
      padding-top: 60px;
      padding-bottom: 60px;


That allows the different states to take up the height of the nav bar.

See it in this bootply

Answer 2

I just used margin-top:. Not sure if it's the most eloquent, but it works.

 .nav,.navbar-toggle {

Answer 3

You can add flex to your navbar:

.navbar {
    display: flex;
    align-items: center;

be aware of browser differences though.

Answer 4

Vertically aligning navigation links is almost a universal problem when using Bootstrap. a workaround is :

.navbar-nav>li>a {
 line-height: line height that you need;