Changing the space between each item in Bootstrap navbar

Question

How can I create a larger space between each link on my navbar, so they are further apart? Is it something I change the CSS or HTML? Here's how I've implemented my navbar in the html:

<div class="navbar-wrapper"> <div class="container">     <div class="navbar navbar-static-top" role="navigation">     <div class="container full-width">     <div class="navbar-header">           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">             <span class="sr-only">Toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>         <a class="navbar-brand" href="#"></a>      </div>      <div class="navbar-collapse collapse">         <ul class="nav navbar-nav navbar-right">             <li class="active"><a href="#home_page">Home</a></li>             <li><a href="#about_page">About</a></li>             <li><a href="#portfolio_page">Portfolio</a></li>             <li><a href="#contact_page">Contact</a></li>         </ul>      </div>      </div>      </div> </div> </div> 

Answer 1

You can change this in your CSS with the property padding:

.navbar-nav > li{   padding-left:30px;   padding-right:30px; } 

Also you can set margin

.navbar-nav > li{   margin-left:30px;   margin-right:30px; }