How can I center my bootstrap navbar in CSS? - html

Question

I'm trying to make it where all links within the navbar are centered and if I had more links they will automatically be centered as well.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>

Answer 1

Do you want you navbar to look like this??
<div class="container">
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</nav>
</header>
</div>

Answer 2

May this helps you in understanding more.. http://www.bootply.com/CSI2KcCoEM
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Center 1</li>
<li>Center 2</li>
<li>Center 3</li>
<li class="navbar-right">Right 2</li>
<li class="navbar-right">Right 1</li>
</ul>
</div>
</nav>

Answer 3

You can center your element setting giving ul the property of display:inline-block; and margin:0 auto; and then text-align:center; to its parent element
.navbar-nav{
float:none !important;
margin:0 auto;
display:inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" style="text-align:center"> <!--- added text-align center --->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
DEMO

Answer 4

You can use : Class="Center-block"
<div class="container-fluid" class="Center-block">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>

Answer 5

Try this:
Make ul text-align:center; & add display: inline-block; to li a