I created a bootstrap grid views block with 4 columns. When I visit the page in mobile device, I see one column grid. When I visit the page in tablet device, I also see one column grid plus blank to the right.

enter image description here

enter image description here How can I make it more responsive? I am also confused how it should behave in my case.

--------------------------------------------------------------------------------enter image description here


What classes exactly did you use ?

The breakpoints used for the grid could be different depending of what device size you aim for your columns. The smallest size handled by the BS grid is for devices with < 768px width by adding class col-xs-* (in Boostrap 3, for Bootstrap 4 it's up to 576px). Typically this is for some tablets & almost all smartphones in portrait mode.

If you only want set classes for superior size, it will automatically be stacked on extra small devices. For example, if you used col-md-3 for each column, when the device width will worth < 768px, all the columns will be stacked each under the others (which is often wanted on small width regarding layouts). But you can add col-xs-6 too on each to have 50/50 columns on small devices.

See more Bootstrap documentation about the Bootstrap grid system : http://getbootstrap.com/css/#grid-options

  • Using bootstrap 3 For the views block that I created, I gave these bootstrap classes to the block col-md-10 col-sm-12 com-xs-12. I have one views grid block with 4 columns. I am not sure how the 4 columns break into 3 col > 2 col > 1 col depending on sizes of screens. – learn4ever Nov 12 '16 at 18:05
  • Added one more image which shows the block classes that I gave to the views bootstrap grid block. – learn4ever Nov 12 '16 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.