CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Krang
Krang

Reputation: 235

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.

Upvotes: 4

Views: 31226

Answers (1)

isherwood
isherwood

Reputation: 61083

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>

Upvotes: 4

Related Questions