Bootstrap columns stack vertically when their total columns is equal to 12 -
in offsetting columns example this page first column has col-sm-5
, second column has same col-sm-5
offset col-sm-offset-2
. total of bootstrap grid's columns 5+(5+2)=12 suppoed make aligned horizontally small screens , not being stacked vertically result shows. why happen ? tried remove offset nothing has changed.
<div class="container-fluid"> <h1>hello world!</h1> <p>resize browser window see effect.</p> <div class="row" style="background-color:lavender;"> <div class="col-sm-5 col-md-6" style="background-color:lightgray;">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:lightcyan;">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> </div>
it seems working expected me, trying target smallest screens? if so, try -xs- instead of -sm-?
Comments
Post a Comment