Categories
css html twitter-bootstrap

How to add gap between list items in Bootstrap grid?

I’m trying to make a two tiered horizontal list in bootstrap. It’s like a secondary nav that will sit below the page header (so it won’t be wrapped in nav tags).

I’m trying to do it using a list, but am having trouble with the spacing. Since it needs to be 4 items wide (4 on top, 4 on bottom) I’m making each list-item into a col-md-3 (because 12/4 = 3).

So far, I can get them to line-up horizontally but I can’t figure out a way to get any separation between them without pushing the 4th item down to the next level. I’ve been using margin to get some space between them, but like I said, that only breaks it.

Here’s the code…

.secondary-nav-container {

ul.list-group:after {
clear: both;
display: block;
content: "";

}

.list-group-item {
float: left;
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
margin: 0px;
padding: 10px 0px;

}

a {
//nothing here yet
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="secondary-nav-container container">
<div class="row">
<ul class="list-group">
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
</ul>
</div>
</div>

The goal is to have two rows with 4 list-items in each that takes up the full width of the row, and stacks on top of each other. With spacing between each list-item so it doesn’t look like there is just one giant horizontal line across the top of each row — there needs to be space between each list-items horizontal line at the top.


Asked by

Krang

It’s best to not mix grid elements and style elements. Since your list requires it, you’ll need to move some styles to the anchors rather than the list items:

ul.list-group:after {
clear: both;
display: block;
content: "";
}

.list-group-item {
float: left;
border: 0 !important;
margin: 0px;
padding: 10px 0px;
}

a {
display: block;
padding: 5px;
border: 1px solid pink;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="secondary-nav-container container">
<div class="row">
<ul class="list-group">
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
</ul>
</div>
</div>