How to use responsive design with bootstrap views

Question

I've come a little confused and stuck with my current learning. Whilst my efforts using Workbench, Panels, Views with Bootstrap 3 looks pretty good on my desktop, when testing the Responsive layout with the Web Developer plugin, it looks pretty dire for use with smaller resolutions ie phones, tablets etc. In this day and age, I'd rather now focus my efforts on those mediums primarily.

My issue is, my Views grids matrix (say 3*4 cells) works well on the (1600*900) desktop, but repeats the Views matrix layout on the smaller mediums, obviously not right; hoping it would be say, a list. I've done a little research and maybe I'm missing an extra enabled module and found this:

https://www.drupal.org/project/views_responsive_grid

Others say it's merely using the CSS (SPAN etc) but I'm confused with what I generally need to do as my findings aren't Drupal specific.

I need to get things like my user dashboard looking well for mobile, tablet layout etc and maybe my approach using Panel pages was now the wrong way, so I'm happy to restart those pages again, or do simply what I may be missing in the first place.

Can someone give me some indicators to the norm one needs to do to get things going?

Thanks for your help.

Please be gentle, I have an ongoing illness and the ongoing meds don't help with my cognitive ability so I'm not that dumb (-;

Answer 1

I think your problem is in using Views grid format. That is table based and not responsive in the way you would want it. Tables can be responsive but in a table way (hiding of columns and inserting sliders etc).

You need to use 'unformatted list' as the format, and then for your 'row class' you need to set appropriate bootstrap col-* classes and you have to get a bootstrap row class in there as well. To do that your best bet is to override the views template files and preprocess functions.

There are plenty tutorials etc available for that on the web.

Bootstrap provides the framework, you just need to make sure your html conforms and that you put the classes you need in the right places. It can be done in views without any major issues.

You should also look at these modules as they definitely will help you (provided you have read the twitter bootstrap documentation and understand at least the basics)

Views Bootstrap, Display Suite Bootstrap Layouts, Panels Bootstrap Layouts

Answer 2

Edit the View and under format select Unformatted list. In "Settings" under "Format" select "Row Class": col-md-3 col-sm-6 col-xs-12 or any other value.

Answer 3

There are a few ways to go about introducing the responsive design to your pages. As Reynolds recommended, go for unformatted list Format for your view rather than table/html list or grid.

In your view page, click on Theme Information link at the right side bottom end to see what template files are available to override.

On how to override a template file, read the following Drupal straight forward Drupal documentation:

https://www.drupal.org/node/1089656

Once you have successfully override a template file. Then open the file (that corresponds to your content type or view) and make your changes (don't forget to clear the cache i.e. drush cc theme-registry OR drush cc all OR from Performance). Example of of one row and three columns is as follow:

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

You will need all your columns to be wrapped in a div with a "row" class. The above would give you one row with 3 columns. The columns would automatically resize for different display ports (extra small, small, medium and large). For more info on media queries and display ports see here http://getbootstrap.com/css/#grid-media-queries

For more info and practicing what you need, see the following examples (change them and you will see the result accordingly) :

http://www.bootply.com/qpQdj66d38 http://www.bootply.com/DPiMgjeIqK http://www.bootply.com/stwBZnj7Yh

Note: Should you have columns of varying heights, apply a fixed amount of height to the columns (divs with css class col-xx-xx).

Good luck, Bootply and Bootstrap documentation is your best friend.