Subtheming bootstrap 3 using sass starterkit Drupal 7

Bootstrap theme is one of the most popular front-end framework and installed theme in Drupal. because of simplicity and easy to use in templating, what I like most in bootstrap is the responsive grid system for much faster web development.

In this tutorial you will learn how to build your own theme using bootstrap starterkit sass and how to use the responsive grid system of bootstrap.

Getting Started subtheming Bootstrap 3 in Drupal 7

First download drupal module bootstrap in drupal.org

  1. Place the downloaded bootstrap theme inside sites/all/themes directory.
  2. Copy sass folder inside the sites/all/theme/bootstrap/starterkit and move outside the bootstrap folder rename it to myTheme.
  3. By default the bootstrap assests is not included in sass bootstrap starterkit you have to download it first at getbootstrapsass_download
  4. After downloading the sass library rename it to bootstrap and place it inside your theme directory myTheme.
  5. Now rename sass.starterkit file to myTheme.info
  6. Edit your .info file and rename it to your own theme.
  7. Enable your sub-theme in admin menu appearance.