3

I wanted to create multicolumn list-group to have different number of columns in different resolutions using Bootstrap (newest version 3.2.0).

I used the following code to achieve this:

<div class="list-group col-lg-12">
<div class="col-xs-12">
    <div class="list-group-item list-group-item-info">
    <h2 class="list-group-item-heading">My title</h2>
    </div>
</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
  <a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>       
</div>

and it works exactly as I wanted - Bootply demo

However using such solution caused one problem. When I want to display anything later, for example:

<p class="clearfix alert alert-warning text-center">
 a piece of code
</p>

it seems there is a problem with clearing floats what can be seen here: Bootply demo

Question - can it be easily fixed or maybe I cannot put extra divs when using list-group? I tried to use clearfix but without any success. If it cannot be fixed is there any other solution to achieve the same result using Boostrap? I was looking in other components but haven't found anything other and obviously I don't want to use tables for that.

Marcin Nabiałek
  • 109,655
  • 42
  • 258
  • 291

1 Answers1

2

wrap <div class="list-group col-lg-12"> with <div class="row"> and the clearfix works then. All your col-md style tags should be in a div class row or alike (controls-row could also be used). Rows should also be inside a container. Example here: http://www.bootply.com/azBEpNdMZq More info here: http://getbootstrap.com/css/#grid

trees_are_great
  • 3,881
  • 3
  • 31
  • 62
  • Ah yes, well noticed. This is only needed when using floated elements (pull-left and pull-right). – trees_are_great Oct 27 '14 at 14:49
  • There is one problem with that solution. If you look at http://www.bootply.com/yFM4p51NJ7 (I've change some things) you will see that adding rows inside list-group will cause that when you open it as mobile you will get horizontal scrollbar when resizing your browser to minimum. And removing it will cause list-group won't take full container width - http://www.bootply.com/64aKo3Rtcc – Marcin Nabiałek Oct 27 '14 at 14:51
  • A few people have been reporting this issue in recent versions of Bootstrap. I found a fix\ workaround here: http://stackoverflow.com/questions/18392477/how-to-make-bootstrap-3-fluid-layout-without-horizontal-scrollbar Adding `body { overflow-x: hidden;}` to your css will resolve this issue- http://www.bootply.com/BV7NpHyw1e – trees_are_great Oct 27 '14 at 17:08
  • I saw this but I thought it's related to fluid container and rather earlier versions of Bootstrap. – Marcin Nabiałek Oct 27 '14 at 17:10