{"id":9647,"date":"2020-01-01T21:26:08","date_gmt":"2020-01-02T03:26:08","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=9647"},"modified":"2020-01-02T10:24:52","modified_gmt":"2020-01-02T16:24:52","slug":"make-responsive-bootstrap-columns-in-drupal-8-x-views-grid-layout","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2020\/01\/01\/make-responsive-bootstrap-columns-in-drupal-8-x-views-grid-layout\/","title":{"rendered":"Make Responsive Bootstrap Columns in Drupal 8.x Views Grid Layout"},"content":{"rendered":"

A little trick to make Drupal 8.x Views Grid layout columns become responsive using Bootstrap. This allows for collapse to fewer columns per row on narrower viewports.<\/p>

Working Prototype: Drupal 8.x Install with Bootstrap Child Theme<\/h2>

Here’s the desktop Home Page of a working prototype I made (of a pretend crop seed company) using a Drupal 8.x install.<\/p>

\"Drupal
Drupal 8.x Prototype – Home Page Desktop<\/figcaption><\/figure>

Theme and Style<\/h2>

I installed the Bootstrap theme<\/a> and created a child theme named “BundaTheme” for customizations I do not want overwritten in future updates. Currently this theme still uses Bootstrap 3. I uploaded the Bootstrap 3.4.1 libraries<\/a> (including jQuery, etc.) to a “libraries” directory and pointed my child theme to use those local files instead of relying on CDN code (the typical Bootstrap style customization source of the theme).<\/p>

\"\"<\/figure>

On the homepage I used Drupal Views and Custom Blocks to create an array of “Teaser” configurations of product listings. These are simply the “Article” Content Type that comes in a default Drupal install. I was using them as a Content Type before making a proper “Product Cards” Custom Content Type (with add-to-cart functionality).<\/p>

Drupal Admin Choices<\/h2>

I modified the “Frontpage” View at first, with the plan being to duplicate this view for a “Products Page” version later. It will pull in the Product Cards Custom Content Type instead of Articles.<\/p>

\"Drupal
Drupal Admin > Structure > Views > Frontpage > Custom Grid<\/figcaption><\/figure><\/div>

Notice the Grid format, set to display “Teaser” views of Content.<\/p>

Click on “settings” under Format > Grid<\/p>

\"Drupal
Drupal Admin Custom View settings<\/figcaption><\/figure><\/div>

You must enter a number of columns. I entered “2”.<\/p>

Then, as long as you have Bootstrap installed, you should be able to enter column classes and a row class<\/a>. I entered the column classes col-sm-12<\/code> and col-md-6<\/code>. That means: for small screens, a column should take up all 12 Bootstrap grid columns. For medium (or “md”) sized viewports, a column should take up 6 of the 12 Bootstrap grid columns, or half, meaning 2 columns will fit in Medium-sized viewports and up.<\/p>

\"Drupal
Drupal Admin Custom View grid settings<\/figcaption><\/figure><\/div>

This solves the problem of the Drupal Grid sticking to the “2” columns setting, no matter how narrow the viewport gets, which does not look good on a phone.<\/p>

Notice on the left view below, the columns are so narrow it wraps one of the title words (“dissensioest”).<\/p>

\"Drupal
Drupal 8.x grid views making columns responsive after adding Bootstrap layout classes<\/figcaption><\/figure><\/div>

You can enter other Bootstrap classes. Since this is BS3, it still has “panel” components<\/a> (I think a lot of components are deprecated in BS4 in favor of using the Cards classes<\/a> for everything). I didn’t like the way panels looked wrapping each content item, but they did work, so if you like to wrap with Wells or Media or some other BS3 components, try it out.<\/p>

BS Classes in Custom Block Header<\/h2>

In the case of the top section of the home page, it is a Custom Block I created and then added to the Structure > Block Layout admin area. Notice I make it show up only on the home page (or as Drupal knows it: <front><\/code>)<\/p>

\"Showing
Showing custom block on only some pages<\/figcaption><\/figure><\/div>

Edit the content of a custom block by going to the Custom Block Library tab.<\/p>

\"Drupal
Drupal 8 Custom Block Library<\/figcaption><\/figure><\/div>

Adding BS classes is done the standard way of writing semantic HTML and including BS classes in the elements.<\/p>

\"BootStrap
BootStrap 3 classes in HTML markup in Drupal 8 Custom Block<\/figcaption><\/figure><\/div>

Careful to use the BS major version you have installed in the in the Drupal installation, as there are some breaking changes I’ve noticed. i.e.; BS3’s “img-responsive<\/a>” class is changed in BS4 to be “img-fluid<\/a>“.<\/p>

Responsive Results<\/h2>

Here is an example of how the page started to look after employing Bootstrap classes that allowed for more graceful responsiveness on mobile viewports.<\/p>

\"Mobile<\/a>
Mobile vsn of site, now responsive.<\/figcaption><\/figure>
mobile responsive vsn.<\/figcaption><\/figure><\/div>","protected":false},"excerpt":{"rendered":"

A trick to make Drupal 8.x Views Grid layout columns become responsive using Bootstrap. This allows for fewer columns per row on narrower viewports.<\/p>\n","protected":false},"author":1,"featured_media":9665,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"A trick to make Drupal 8.x Views Grid layout columns become responsive using Bootstrap. This allows for fewer columns per row on narrower viewports.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[787,788,786,216,781,789,105,772],"class_list":["post-9647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-bootstrap","tag-cms","tag-drupal","tag-prototype","tag-responsive","tag-shopping-cart","tag-web-design","tag-web-development"],"aioseo_notices":[],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":787,"label":"Bootstrap"},{"value":788,"label":"CMS"},{"value":786,"label":"Drupal"},{"value":216,"label":"prototype"},{"value":781,"label":"Responsive"},{"value":789,"label":"shopping cart"},{"value":105,"label":"web design"},{"value":772,"label":"web development"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/Responsive-Columns-using-Bootstrap-Classes-in-Drupal-8-Views-Grid.png",1200,675,false],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":787,"name":"Bootstrap","slug":"bootstrap","term_group":0,"term_taxonomy_id":791,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":788,"name":"CMS","slug":"cms","term_group":0,"term_taxonomy_id":792,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":786,"name":"Drupal","slug":"drupal","term_group":0,"term_taxonomy_id":790,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":216,"name":"prototype","slug":"prototype","term_group":0,"term_taxonomy_id":216,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":781,"name":"Responsive","slug":"responsive","term_group":0,"term_taxonomy_id":785,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":789,"name":"shopping cart","slug":"shopping-cart","term_group":0,"term_taxonomy_id":793,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":105,"name":"web design","slug":"web-design","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":19,"filter":"raw"},{"term_id":772,"name":"web development","slug":"web-development","term_group":0,"term_taxonomy_id":776,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/Responsive-Columns-using-Bootstrap-Classes-in-Drupal-8-Views-Grid.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1NcZe-2vB","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=9647"}],"version-history":[{"count":15,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9647\/revisions"}],"predecessor-version":[{"id":9677,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9647\/revisions\/9677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/9665"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=9647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=9647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=9647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}