1

I'm trying to build a responsive Views grid in Drupal 7 and bootstrap3 sub-theme. On Views I am using the Responsive Grid module as format.

In my Views format settings I configured the grid to 5 columns.

In order to support 5 columns in bootstrap I made an addition to my less file, according to this article: https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap in the answer given by lightswitch05.

My HTML markup created by Views would look like this

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
</div>

It all works just fine for the 5 column grid in Medium devices Desktops (≥992px) using the col-md-2-4 class.

The problem is for Small devices Tablets (≥768px) using col-sm-4 and Extra small devices Phones (<768px) using col-xs-6.

Since class "row" is already wrapping 5 elements when trying to display 3 or 2 grid columns there is either 2 or 1 element out of the grid row.

So the question is: Is it possible to create a responsive grid with 5 column grid for col-md, a 3 column grid for col-sm and 2 column grid for col-xs, in Drupal 7 Views ?

3

I think i figured it out.

If I set columns to 1 then I can use any responsive number of bootstrap columns according to the width.

  • 1
    Can you provide a bit more information with regards to your CSS since this isn't really that complete. Mainly, how did you regulate it to 5 columns and not more or does it just keep expanding? – shaneonabike Nov 4 '15 at 15:28

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.