bootstrap col-md-6 not working while viewing in tablet mode

user_19368824 0
Viewed 47

I was trying to get 2 columns side by side in tablet size while so I wrote col-md-6 so that each column will use only 6 units,but as soon as I shift from desktop size to tablet size the columns get stacked vertically with each column using all 12 units.In fact there is the same issue while viewing in mobile mode and col-sm-4 also stacks columns vertically. Please help.

    <div class="row">
    <div class="col" style="background-color:red;border:1px solid">
        col
    </div>
    <div class="col" style="background-color:red;border:1px solid">
        col
    </div>
    
</div>
<div class="row">
    <div class="col-md-6" style="background-color:green; border:1px solid">
        col-md-6
    </div>
    <div class="col-md-6" style="background-color:green; border:1px solid">
        col-md-6
    </div>
</div>
bootstrap-5 css html
1 Answers

Your problem is also your answer in the sense that Bootstrap's breakpoints are designed to stack columns based on the device view. Try to use col-sm-6 instead of col-md-6.

user_167217290
Related