Bootstrap Center Navbar Items - css

Question

I know I can push navbar items to the left and right, but how would I center them?
text-align:center;
doesn't work nor any of the other things I thought of.

Answer 1

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)

Answer 2

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

Answer 3

I had similar problem. What worked for me is adding rule 'justify-content' like this:
CSS:
.navbar-expand-lg .navbar-collapse {
display: flex!important;
justify-content: space-around;
flex-basis: auto;
}
HTML:
<nav id="hamburger" class="navbar sticky-top navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav center">
<div><a class="nav-item nav-link active" href="#">
Start <span class="sr-only">(current)</span></a>
</div>
<div><a class="nav-item nav-link" href="#">Portfolio</a></div>
<div><a class="nav-item nav-link" href="#">Blog</a></div>
<div><a class="nav-item nav-link" href="#">O mnie</a></div>
<div><a class="nav-item nav-link" href="#">Kontakt</a></div>
</div>
</div>
</nav>

Answer 4

Use text-center or mx-auto or container-fluid or use flexbox technique, flex justify-center
You could use this hack text-center (this does not only apply for text)
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

Answer 5

You can use
text-align:center;
to a wrapper element to center its childs, but only if the childs have
display: inline;
/* or */
display: inline-block;
Another option, if you know the width of the element you want to center, is
display: block;
width: /* something */;
margin: 0 auto;