Drupal Technical

[Drupal] How to build Responsive Drupal themes using Twitter Bootstrap V3

Tintu.manuel | | 3 min read

Internet is overhauling every piece of human life. As the resulting phenomenon of booming telecommunications market, around 60% of people access sites through smartphones, tablets etc. Why say this? How web developers are related to telecommunications booming? We might have seen some sites look good in few devices and not in others. As all these devices have a different display, here comes the relevance of discussing responsive designs. The advantage of responsive designs includes,
1. It will simultaneously adjust its width with the device.
2. More visibility and readability even in smaller screens.
Twitter bootstrap V3 is the my first priority to create responsive websites, as it is flooded with features like 12 Grid system, Glyphicons(Font icon images), pre-styled most of the HTML elements, Mobile first and always responsive, and predefined javascript plugins for different effects also we can customize.

How to implement a Drupal theme using Bootstrap

Building a theme using Bootstrap is easy if you understand the grid concept, because Bootstrap framework is based on grid system (refer http://en.wikipedia.org/wiki/Grid_%28graphic_design%29, http://getbootstrap.com/examples/grid/).

Bootstrap files are available in Github. You can download the required files from here. https://github.com/twbs/bootstrap. Include bootstrap.min.css and bootstrap.min.js (if necessary) in your .info file. After that, structure your template files as below.

The Bootstrap V3 framework is mobile first and the main priority is for smaller screens and expands components and grid for large screens. There are four sizes/break points. These four grid sizes allow you to control grid behavior on different devices (desktop, laptops, tablet, smartphone, etc..) Also we can hide/show different blocks/divs in each breakpoints by using the its specific classnames.

  • Tiny (.col-xs-) - For Extra small devices (phones, less than 768px)
  • Small (.col-sm-) - Small devices (tablets, 768px and up)
  • Medium (.col-md-) - Medium devices (desktops, 992px and up)
  • Large (.col-lg-) Large devices (large desktops, 1200px and up)

Use container class for fixed width div and container-fluid for full width(100%) for the wrapper. The row class can be used as wrapper for column classes. We can fix the additional block margin in start and end by minus margin in row class. Here are the css styles for row and column classes and structure of the html. Use this structure in your theme template. 

  
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.col-**- {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
<div class="container">
  <div class="row">
    <div class="col-sm-12"></div>
  </div>
  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
  <div class="row">
    <div class="col-sm-12"> </div>
  </div>
</div>

Also please refer bootstrap.css and check class names for different HTML elements like form, button, nav bar etc.. Some of the class names available are listed below:

  • .form-group – use this class to form to get all the bootstrap styles for form elements.
  • .navbar - use this class for nav bar
  • .lead – use this class to highlight a block elements
  • .small – Use this class if you want to make small elements in a block.
  • .text-left – align text/images to left.
  • .col-sm-3 – this class is for 3 column grid for small devices.

When you are using bootstrap please make sure to use its own classes, so that we can make sure our theme is elegant and responsive! Please feel free to ask us for any clarifications.

 

 

Related Topics