CODEWITHSUNDEEP
cssbootstrap-modal
nabeel
nabeel

Reputation: 427

Center align the nav-bar content in Bootstrap

I am trying to centre the nav-bar links. But sadly i haven't had much luck so far. I've tried to use navbar-justified but that just throws every thing out of proportion.

here is the code.

Upvotes: 1

Views: 41

Answers (2)

Jaqen H'ghar
Jaqen H'ghar

Reputation: 16824

Make the container inline-block to get the width of the content, and align the navbar elements. To get rid of the gap underneath use vertical-align: top.

To avoid changes when collapsed add media query:

@media (min-width: 768px) {
   .navbar {
      text-align:center;
   }
   .navbar .container-fluid {
      display: inline-block;
      vertical-align: top;
   }
}

You can see here

Upvotes: -1

martin
martin

Reputation: 96959

I assume you wanted to center everything to the center. The easiest way is to use display: inline-block and then text-align: center on the parent element. Then also reset float to use the default aligment:

See you updated demo: http://www.bootply.com/iu9NOXfmEV

Upvotes: 2

Related Questions