CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Marcin Nabiałek
Marcin Nabiałek

Reputation: 111839

Making list-group full-width - hortizontal scrollbar appears

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.

Upvotes: 3

Views: 8021

Answers (2)

jme11
jme11

Reputation: 17372

If you don't want any spacing between the list-group-items, then you'd need to add the list-group-item class to the columns:

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

Upvotes: 0

DavidG
DavidG

Reputation: 118987

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

Upvotes: 1

Related Questions