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
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With