Making list-group full-width - hortizontal scrollbar appears

Question

I wanted to make my list-group full container width with multiple columns (Bootstrap 3.2.0). I've created the following code:

<div class="container" style="background: red;">
  <div class="row">
    <div class="list-group">   
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <a href="" class="list-group-item">item1</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item2</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item3</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item4</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item5</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item6</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item7</a>
        </div>
      </div>
    </div>
  </div>

<p class="row alert alert-warning text-center">
 message here
</p>
</div>

Demo on Bootply

The only problem here is that when you resize your browser window, for smaller resolution (probably sm) the horizontal scrollbar appears probably because of right margin or right padding. It seems it's probably connected to using row here.

When I remove the outer .row div there is no problem (no horizontal scrollbar appears - Bootply demo) but in this case list-group won't take full container width.

Question - is it possible to solve it in simple way? Why does it happen? I know it's maybe not very standard solution (I put many extra divs inside list-group) but if possible I would like to make it work.

Answer 1

The problem you have is that you are missing a col-* class. Bootstrap requires that nested rows need columns inside them as the immediate child but your hierarchy goes container -> row -> row -> col-*. So you just need to insert a col-xs-12 in the middle, or more simply, add that class to your list-group div.

<div class="container" style="background: red;">
  <div class="row">
    <div class="col-xs-12 list-group">   
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <a href="" class="list-group-item">item1</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item2</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item3</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item4</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item5</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item6</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <a href="" class="list-group-item">item7</a>
        </div>
      </div>
    </div>
  </div>

<p class="row alert alert-warning text-center">
 message here
</p>
</div>

And the Bootply is here: http://www.bootply.com/jIW90o3ZCA