html - Grid alignment in Bootstrap on small devices -
i have 3 column row 3 images using bootstrap. below.
| | | |
| | | |
| | | |
| | | |
|--------------------- |
| | | |
| | | |
| | | |
| | | |
in smaller devices, have problem see 2 column , 1 column empty content. there anyway can join these 2 rows , 2x2 2x2 2x2 schema on smaller devices?
my markup
<div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"></div> <div class="col-md-4 col-sm-4 col-xs-12"></div> <div class="col-md-4 col-sm-4 col-xs-12"></div> </div> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"></div> <div class="col-md-4 col-sm-4 col-xs-12"></div> <div class="col-md-4 col-sm-4 col-xs-12"></div> </div>
this give 2 columns on small devices , 3 columns on tablet , up. .clearfix
ensures columns clear floats properly.
<div class="row"> <div class="col-xs-6 col-sm-4"></div> <div class="col-xs-6 col-sm-4"></div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4"></div> <div class="clearfix hidden-xs"></div> <div class="col-xs-6 col-sm-4"></div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4"></div> <div class="col-xs-6 col-sm-4"></div> </div>
Comments
Post a Comment