CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
user2953989
user2953989

Reputation: 2979

Changing the space between each item in Bootstrap navbar

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>

Upvotes: 61

Views: 257636

Answers (6)

cloudxix
cloudxix

Reputation: 486

I had two buttons (Bootstrap 4) aligned right in a nav bar and I didn't want to tinker with CSS / styles etc, so I created a disabled button between the two buttons and it worked like a charm:

<button class="btn btn-primary float-right">Make Active</button>
<button class="btn float-right" disabled>&nbsp;</button>
<button class="btn btn-success float-right">Send Proforma</button>

Upvotes: 0

Suneth Perera
Suneth Perera

Reputation: 181

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>

Upvotes: 17

Rami Alloush
Rami Alloush

Reputation: 2626

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 */
}

Upvotes: 1

loopasam
loopasam

Reputation: 3136

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.

Upvotes: 48

jamilica
jamilica

Reputation: 566

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;
    }
}

Upvotes: 35

DaniP
DaniP

Reputation: 38252

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;
}

Upvotes: 94

Related Questions