Bootstrap 3 Multi-column within a single ul not floating properly

Question

I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time.

I need to create two columns out of one ul by alternating a pull-left & pull-right on list items. What am I doing wrong?

http://bootply.com/92446

I know that including rows in my markup should fix my issue but I would love to not break the list and keep having a single one. — davidetucci, Nov 08 '13 at 10:39

score 157 · Answer 1 · edited May 06 '15 at 02:18

157

You should try using the Grid Template.

Here's what I've used for a two Column Layout of a <ul>

<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

This worked for me.

edited May 06 '15 at 02:18

Joe Kennedy

9,365
7
41
55

answered Apr 11 '14 at 06:28

Varun Rathore

7,730
3
27
30

7

This is one of the most elegant solutions I have stumbled across on SO. Love It! – MattSizzle Aug 23 '14 at 02:41
1

What a beauty... on top of giving me 2 columns I wanted, it neatly laid them out using the bootstrap css classes. Thanks – FacePalm Sep 21 '14 at 11:32
1

this one is neat.changing col-xs-6 to col-sm-6 make it more responsive. – spicykimchi Sep 28 '14 at 02:47
22

Excellent solution! I advise on using `list-unstyled` instead of `list-group` to prevent default `ul` styling. And to prevent default styling all together, one can also get rid of `list-group-item` – Robin van Baalen Jan 13 '15 at 14:08
Doesn't work on IE (<=11) with bootstrap 4, probably because bootstrap 4 is using Flexbox. – Clemorphy Apr 06 '18 at 14:58
1

Actually it works on IE with BS4 if you set a fixed `height` on the UL. Setting a `max-height` is not enough :( – Clemorphy Apr 06 '18 at 15:06
So cool! I tried adding
– kenswdev Feb 28 '21 at 21:48

Dmytro · Answer 2 · 2016-09-21T21:31:41.290

Thanks, Varun Rathore. It works perfectly!

For those who want graceful collapse from 4 items per row to 2 items per row depending on the screen width:

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>

score 8 · Answer 3 · answered Mar 04 '14 at 23:54

you are thinking too much... Take a look at this [i think this is what you wanted - if not let me know]

http://www.bootply.com/118886

css

.even{background: red; color:white;}
.odd{background: darkred; color:white;}

html

<div class="container">
  <ul class="list-unstyled">
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
</div>

Bootstrap 3 Multi-column within a single ul not floating properly

3 Answers3

Linked