Creating a multicolumn list group
I wanted to create a multi-column list group to have a different number of columns at different resolutions using Bootstrap (newest version 3.2.0).
I used the following code for 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 a solution caused one problem. When I want to display something later, for example:
<p class="clearfix alert alert-warning text-center">
a piece of code
</p>
There seems to be a problem with clearing floats, which can be seen here: Bootply Demo
The question is - can it be easily fixed or maybe I can't add additional divs when using list-group
? I tried to use clearfix
but without any success. If it cannot be fixed, is there another solution to achieve the same result with Boostrap? I looked in other components but didn't find anything else and obviously I don't want to use tables for this.
source to share
wrap <div class="list-group col-lg-12">
with <div class="row">
and then clearfix works. All of your col-md style tags must be on a div class line or the same (you can use a control line too). The strings must also be inside the container. Example here: http://www.bootply.com/azBEpNdMZq
More details here: http://getbootstrap.com/css/#grid
source to share