Skip to main content

The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

Drupal & Bootstrap - Grid system

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:


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.


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.


  1. .region-footer .block {
  2.  position: relative;
  3.  float: left;
  4.  width: 33%;
  5.  padding: 0 20px;
  6. }

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

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

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


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.

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


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!

Web Development

Would you like to know more about what we do?

View Our Services

Graphic Design Cheeky Monkey

Have a look at some our client work

View Our Work

Cheeky Monkey Discovery

Learn more about Cheeky Monkey Media

About Us