Drupal & Bootstrap – Grid System

Imagine this scenario. You add three different blocks in your footer region and the mockups call for them to be side by side. Here are 3 ways to accomplish this Drupal design challenge:

Regions

Using regions, we could add and create more footer regions and call them Footer first column, Footer second column, third and forth just like in Bartik theme. I personally don’t like this solution because what if we decide in the future to only have 3 columns instead of four?  Then we will need to remove regions and change the css, clear the cache etc.. not ideal.

CSS

Another way to do this would be to go and do all the work in CSS and is the way I’ve been doing it for years.

 

.region-footer .block {
 position: relative;
 float: left;
 width: 33%;
 padding: 0 20px;
}

Or if you’re using sass or less you could extend bootstrap’s grid system default classes like this:

.region-footer .block {
 @extend .col-md-4;
}

This works perfectly fine and is easy to edit in the future if we want to change from 4 columns to 3.

hook_preprocess

The final solution that I will show you today is to use drupal’s preprocessors to change the HTML markup to take advantage of the existing styles that bootstrap provides.

In your template.php file create or add to the existing block preprocess hook.

/**
* Implements hook_preprocess_block().
*/
function themename_preprocess_block(&$variables) {
 if($variables['block']->region == 'footer') {
   array_unshift($variables['classes_array'], 'col-md-4');
 }
}

 

This tells all the blocks within the region “footer” $variables[‘block’]->region == ‘footer’ to append bootstrap’s col-md-4 class to the classes_array

This same method can be use also to add grid classes to nodes and regions with their respective hook.  hook_preprocess_node() hook_preprocess_region().

Need help with a Drupal project? Our Drupal Web Designers help out with projects for other agencies. Call us!