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  amp  pull-right on list items  What am I doing wrong   http   bootply com 92446

User · Answer

You should try using the Grid Template   Here s what I ve used for a two Column Layout of a  lt ul gt    lt ul class  list-group row  gt        lt li class  list-group-item col-xs-6  gt Row1 lt  li gt        lt li class  list-group-item col-xs-6  gt Row2 lt  li gt        lt li class  list-group-item col-xs-6  gt Row3 lt  li gt        lt li class  list-group-item col-xs-6  gt Row4 lt  li gt        lt li class  list-group-item col-xs-6  gt Row5 lt  li gt   lt  ul gt    This worked for me

User · Answer

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   lt div class  container  gt     lt ul class  list-unstyled  gt       lt li class  col-md-6 odd  gt Dumby Content lt  li gt       lt li class  col-md-6 odd  gt Dumby Content lt  li gt       lt li class  col-md-6 even  gt Dumby Content lt  li gt       lt li class  col-md-6 even  gt Dumby Content lt  li gt       lt li class  col-md-6 odd  gt Dumby Content lt  li gt       lt li class  col-md-6 odd  gt Dumby Content lt  li gt     lt  ul gt   lt  div gt

User · Answer

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    lt ul class  list-group row  gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 1 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 2 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 3 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 4 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 5 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 6 lt  li gt       lt li class  list-group-item col-xs-6 col-sm-4 col-md-3  gt Cell 7 lt  li gt   lt  ul gt

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

Examples related to list

Examples related to css-float

Examples related to twitter-bootstrap-3

Examples related to multiple-columns