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.
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