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

list css-float twitter-bootstrap-3 multiple-columns
davidetucci picture davidetucci · Nov 7, 2013 · Viewed 108.7k times · Source

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

Answer

Varun Rathore picture Varun Rathore · Apr 11, 2014

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.

Related questions

Finding the index of an item in a list

Given a list ["foo", "bar", "baz"] and an item in the list "bar", how do I get its index (1) in Python?

Read More
How do I get the number of elements in a list?

Consider the following: items = [] items.append("apple") items.append("orange") items.append("banana") # FAKE METHOD: items.amount() # Should return 3 How do I get the number of elements in the list items?

Read More
How do I check if a list is empty?

For example, if passed the following: a = [] How do I check to see if a is empty?

Read More