5

I was wondering if it is possible to add spacing between items in Bootstraps navbar to spread them out a little? Specifically if I could space out all nav-items left and right by at least 25px.

I have tried adding margin left and right to the class .navbar-nav and .navbar-nav > a, however it doesn't appear to change anything.

Thank you in advance! 

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <a class="navbar-brand" href="#">Navbar</a>

    <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 ml-auto">
            <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">Disabled</a>
        </div>
    </div>
</nav>
dferenc
  • 7,918
  • 12
  • 41
  • 49
Mark Wild
  • 213
  • 1
  • 3
  • 13

3 Answers3

4

.navbar-nav > a should be working fine to target the .nav-items. In case it does not work, make sure that you apply the custom styles after you reference the bootstrap.css. By the way, Bootstrap uses padding applied to .navbar-expand-{breakpoint} .navbar-nav .nav-link to space out the items. Also the following should work fine:

.navbar-nav .nav-link {
    margin-right: 25px;
    margin-left: 25px;
}

Also, in case you don't mind to extend the markup, there are the handy Spacing utility classes available in Bootstrap. With those you can easily fine-tune your layout.
In the example below I used .mx-3 on .nav-items to increase their margin in horizontal direction to 1rem on each side. Then applied .ml-3 –margin-left– on the last item in order to have it’s right edge align with the rest of the layout.

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <a class="navbar-brand" href="#">Navbar</a>
    
    <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 ml-auto">
            <a class="nav-item nav-link mx-3" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link mx-3" href="#">Features</a>
            <a class="nav-item nav-link mx-3" href="#">Pricing</a>
            <a class="nav-item nav-link ml-3" href="#">Disabled</a>
        </div>
    </div>
</nav>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
dferenc
  • 7,918
  • 12
  • 41
  • 49
3

To separate two navbar areas in bootstrap4, I used this:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">
        <img src="logo.png" width="192" height="44" alt="">
        Bootstrap Navbar Demo
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link mx-3 active" href="/page1">Page 1</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 2</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 3</a>
        </div>
        <div class="navbar-nav">
          <a class="nav-item nav-link mx-3" href="/logout">Logout</a>
        </div>
      </div>
    </nav>

Basically the buttons have margins of mx-3 to separate them a bit. The mr-auto pushes the logout button to far right.

With https://stackoverflow.com/a/18600623/999943 this is pretty nice.

Hope that helps.

phyatt
  • 18,472
  • 5
  • 61
  • 80
0

You need to apply the margin to the class .navbar-nav > .nav-item instead of .navbar-nav > a.

So you should do something like this.

.navbar-nav > .nav-item{
    margin-left: 25px;
    margin-right: 25px;
}
Hugues BONI
  • 311
  • 3
  • 7