Drupal Technical

[Drupal] How to create Bootstrap subtheme in Drupal 7?

Aby.va | | 2 min read

Now all themes are in responsive manner. Bootstrap is the one of the best responsive theme. Its the good starter theme for Drupal 7. It has a lots of specific styles for every designs and we can create a subtheme from Bootstrap theme. It also become a good responsive theme.

Steps for create a bootstrap subtheme :

  • Get Bootstrap Theme
    1. Download Drupal Bootstrap theme. Then download bootstrap and package extract/upload to your sites/all/themes in drupal 7. We need this to set up the subtheme. There is no need to activate the theme.
    2. Download/Enable jQuery Update module. Then extract/upload JQuery Update module to your sites/all/modules. Set the “Default jQuery Version” to 1.9 in current subtheme settings.(jQuery Version” 1.9 or above is supported for bootstrap subtheme). And now set “Alternate jQuery version” to 1.5 in current subtheme settings. (This prevents issues with AJAX heavy modules like Views)
  • Create the subtheme directory and copy files
    1. Create a folder for subtheme inside of sites/all/themes. For example, we will call subtheme sample_subtheme, so we should have an empty directory at sites/all/themes/sample_subtheme.
    2. Copy all the files to sites/all/themes/sample_subtheme from sites/all/themes/bootstrap/bootstrap_subtheme
  • Configure .info file for new subtheme sample_subtheme.
    1. Rename bootstrap_subtheme.info.starterkit to sample_subtheme.info. Remember to replace “sample_subtheme” with the name of new subtheme.
    2. Edit sample_subtheme.info with give it a unique name and description:
              name = Sample bootstrap subtheme
        description = A Bootstrap Sub-theme for project
        core = 7.x
        base theme = bootstrap
    3. Uncomment scripts files includes from sample_subtheme.info and include our new custom CSS and JS files for project into sample_subtheme.info

After the edit of sample_subtheme.info file add our custom CSS and JS folders in to the sample_subtheme folder. Then create a fresh bootstrap subtheme in your own way. Want to read more about Bootstrap, use this link. Do you want to theme you site, why are you waiting, get a quote now.

 

 

Related Topics