Bootstrap Center Navbar Items


Answer :

You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules:

.navbar.center .navbar-inner {     text-align: center; }  .navbar.center .navbar-inner .nav {     display:inline-block;     float: none; } 

Working demo (Bootstrap 3.3.7)


To extend upon the selected answer, adding vertical align top will prevent the space from appearing under the nav items.

.navbar.center .navbar-inner {     text-align: center; }  .navbar.center .navbar-inner .nav {     display:inline-block;     float: none;     vertical-align: top; } 

Demo


Use text-center or mx-auto or container-fluid or use flexbox technique, flex justify-center

  1. You could use this hack text-center (this does not only apply for text)

  2. Or use the exact boostrap class mx-auto

example class="text-center" or class="mx-auto"

in context

<div class="btn-group text-center"> or <div class="btn-group mx-auto"> 

TRY NOT TO USE inline styles (bad practice)

<div class="btn-group" style="margin:0 auto"> 

References here:

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering


Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?