bootstrap justified nav - how to space items?

Question

I'm using the following bootstrap navbar:

<nav class="navbar navbar-default">
   <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
     <ul class="nav nav-pills nav-justified">
      <li><a href="#">Home</a></li>
      <li><a href="#">Readings</a></li>
      <li><a href="#">Workshops</a></li>
      <li><a href="#">Aligning</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
    </div><!--/.nav-collapse -->
   </div><!-- container-fluid -->
        </nav>

It works as intended, but I'd like to add some space between the 'buttons'. I can't seem to find a way to either add padding or margin to the li's so that they space out a little. Any suggestions?

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

I assume that you already solved this somehow. But in case that someone will arrive here.

The problem is, that Bootstrap uses display: table-cell for the .nav-justified > li element.

@media (min-width: 768px)
.nav-justified>li {
    display: table-cell;
    width: 1%;
}

So instead of margin or padding you need to use border-spacing. Simply extend the Bootstrap in your own style:

.nav-justified {
   border-collapse:separate;
   border-spacing:5px;
}

See this thread if you need more information.

edited May 23 '17 at 12:09

Community

1
1

answered Dec 22 '15 at 07:14

JirkaV

943
1
10
16

Actually, I never got it to work and just left it alone. But I just tried this and it worked great! My only modification is to make border-spacing: 5px 0; so that the menu bar doesn't get pushed further away from the header above and the content below. Thank You! – CJ Catalano Dec 22 '15 at 14:27

score 0 · Answer 2 · answered Apr 27 '15 at 08:12

0

try to add the following styles

@media (min-width: 768px) {
  .nav-justified > li {
    padding-right: 15px;
    padding-left: 15px;
  }
}

answered Apr 27 '15 at 08:12

iurii

4,142
2
23
28

Unfortunately this doesn't work. It only adds space inside the buttons. I'm looking to add space between the buttons themselves. – CJ Catalano Apr 27 '15 at 13:16

score 0 · Answer 3 · answered Mar 02 '16 at 18:45

0

You can add transparent borders for each <li> like this:

.nav-pills.nav-justified li {
 border-right : 20px solid rgba(255, 255, 255, 0.00);
}
.nav-pills.nav-justified li:last-child {
 border-right-width : 0px;
}

answered Mar 02 '16 at 18:45

MichaelJTaylor

354
3
2

Thank you. I used JirkaV's solution above, but this looks like it would behave similarly. – CJ Catalano Mar 03 '16 at 04:08

bootstrap justified nav - how to space items?

3 Answers3