Click here to Skip to main content
14,874,096 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have the following html code :

<div class="row">
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1" > Col 1 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1"> Col 2 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1"> Col 3 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 4 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 5 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 6 </div>
</div>


As long as I resize the page to md and sm, everything goes as expected. If I go down to xs, I am getting all the "Col 1" , "Col 2", ...,"Col 6" all lined up in the same row, one after the other .... shouldn't they be stacked one upon the other as if each one were a single line instead ? or is there something I am getting wrong ?

I am using Bootstrap 4.3.1

Thank you.

What I have tried:

tried changing to col-xs-8, col-xs-6 for all the rows
Posted
Updated 20-Mar-21 9:12am

1 solution

Actually, "col-xs-*" does not exist.
the behaviour of a xs viewport is determined, if not default, by "col-*".
Once made the change everything works perfectly.
   
Comments
Richard Deeming 23-Mar-21 6:34am
   
This was changed between Bootstrap 3 and Bootstrap 4:
Migrating to v4 · Bootstrap v4.6[^]

BS4 was released in August 2015, but many older articles still use BS3.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900