Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 586
davidetucci Avatar asked Nov 07 '13 12:11

davidetucci


People also ask

Can you put a column inside of a column in Bootstrap?

You can nest columns inside columns as long as those nested columns "live" inside a row. In fact, if you check the html behind that very example on Bootstrap documentation you will see that those nested columns are in fact placed inside a row.

How do I align columns in Bootstrap?

To horizontally align columns, we can use the justify-content classes. justify-content-start left align the columns. justify-content-center center aligns the columns. justify-content-end right align the columns.

How do I change Bootstrap 3 column order on mobile layout?

Try using col-lg-push and col-lg-pull to reorder the columns in large screens and display the sidebar on the left and main content on the right.


1 Answers

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.

like image 99
Varun Rathore Avatar answered Sep 18 '22 23:09

Varun Rathore