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>
This question is related to
html
css
twitter-bootstrap
navbar
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;
}
I would suggest you just evenly space them as shown in this answer here
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
With regard to bootstrap, the correct answer is using spacing utilities as mentioned by loopasam in a previous comment. Following is an example of using padding for both left and right.
<a href="#" class="nav-item nav-link px-3">Blog</a>
As of Bootstrap 4, you can use the spacing utilities.
Add for instance px-2 in the classes of the nav-item to increase the padding.
Just remember that modifying the padding or margins on any bootstrap grid elements is likely to create overflowing elements at some point at lower screen-widths.
If that happens just remember to use CSS media queries and only include the margins at screen-widths that can handle it.
In keeping with the mobile-first approach of the framework you are working within (bootstrap) it is better to add the padding at widths which can handle it, rather than excluding it at widths which can't.
@media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
}
}
Source: Stackoverflow.com