Drupal Technical

[Drupal] How to configure Drupal Bootstrap Subtheme

Jimmy.sebastian | | 1 min read

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is the array of features and reusable components.

Why use Bootstrap?

  • Easy to use.
  • Default styles for html elements like tables,forms,text boxes, buttons, images.
  • Default styles for components like Button Groups, Navigation Bar, Breadcrumbs, Labels & Badges, Alerts, Progress Bar.
  • Responsiveness & Customizable.
  • Browser compatibility.

You may also look into other solved issues and details related to bootstrap theming over here. ( Also articles related to bootstrap v3 )

The following steps for configuring Drupal subtheme.

Step 1: Download Drupal bootstrap theme.

Step 2: Extract the file and copy the folder 'bootstrap' to 'sites/all/themes/'.

Step 3: Create sub theme directory inside of your 'sites/all/themes/' and copy files from sites/all/themes/bootstrap/bootstrap_subtheme to sites/all/themes/custom_subtheme. Here we call theme 'custom_subtheme'.

Step 4: Rename the file 'bootstrap_subtheme.info.starterkit' to 'custom_subtheme.info'.

Step 5: Edit custom_subtheme.info and modify the name and description of theme. 


  name = Bootstrap Sub-theme
  description = A Bootstrap Sub-theme.
  core = 7.x
  base theme = bootstrap

Step 6: Download jQuery Update.

Step 7: Extract the file and copy to 'web/sites/all/modules'.

Step 8: Enable jQuery Update module and Set the “Default jQuery Version” to 1.10.

Step 9: Enable your sub-theme.

Step 10: If you want change the structure of web page then Copy and modify page.tpl.php and html.tpl.php from sites/all/themes/bootstrap/theme/system to your custom_subtheme’s templates folder at sites/all/themes/custom_subtheme/templates.

Please let us know if we can be of any further help on Drupal theme Development.

 

 

Related Topics