Technical Solution

Introduction to Twitter Bootstrap Theme

Sarika.k | | 2 min read

Bootstrap, a powerful mobile-first front-end framework which incorporates faster and easier development features to the web development platform. Bootstrap is sleek, intuitive and it uses HTML, CSS and Javascript.

We can build responsive Drupal themes using Twitter Bootstrap V3. It gives a basic idea of implementing bootstrap theme.

Bootstrap files are available in Github. You can download the required files from there. In order to apply bootstrap theme first of all add the bootstrap.min.css to your themes folder in 'sites/all/themes/yourtheme/css' and bootstrap.min.js to your themes folder in 'sites/all/themes/yourtheme/js'.To modify or apply additional styling to your web page, add the custom style to your custom.css file. No need to edit any of the original Bootstrap styles directly.

Bootstrap provides fluid grid system that scales up to 12 columns as the device or viewport size increases. The scaling is more appropriate as it uses predefined classes as well as powerful mixins for generating easy and more semantic layouts. Bootstrap is designed as mobile-first in the sense that the code for Bootstrap initially targets smaller screens like mobile, tablets, and then "expands" components and grids for larger screens such as laptops and desktops.

Working of Bootstrap Grid System

Grid systems are used for creating web page layouts. It is achieved through a series of rows and columns that holds the content.

Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container class for making proper alignment and padding.
  • Now, each row can be used to create horizontal groups of columns.
  • Content is placed within columns, and columns should be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first
    and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For
    example, three equal columns would use three .col-xs-4.

The basic grid structure is

<div class="container">
 <div class="row">
   <div class="col-*-*"></div>
   <div class="col-*-*"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">....
</div>
 

 

Related Topics