Skip to main content
09 Jul 2014

Bootstrap is a Open Source responsive theme containing modular CSS and re-usable commonly used interface elements with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.). The theme supports fluid grid system that adapts your website to mobile devices and the desktop or any other viewing environment.

5 quick steps to integrate BOOTSTRAP Theme with Drupal

  1. Download a base bootstrap theme “Bootstrap 7.x-3.0 “ from this location https://drupal.org/project/bootstrap and place it inside “sites/all/themes” or a similar “sites/*/themes folder”.

Note: Bootstrap requires a minimum jQuery version of 1.7 or higher and so install the module “jquery_update” from https://drupal.org/project/jquery_update.

  1. Go to the Modules section in the backend “admin/modules” and enable the “jquery_update”.
  1. Go to the jquery_update setting from “admin/config/development/jquery_update” and select the appropriate jQuery version.

Note: minimum jQuery version is 1.9.0 for Bootstrap 3.1.1

  1. Go to the "Appearance" section in the backend “admin/appearance” and here you will find the recently installed bootstrap base theme “Bootstrap 7.x-3.0”. Enable it and set it as a default theme.
  1. Go to the Bootstrap theme setting in backend “admin/appearance/settings/bootstrap” and configure appropriate settings as per your requirement.

To serve the Bootstrap framework files we can use BootstrapCDN or load any Bootstrap framework files locally. To use BootstrapCDN, go to Bootstrap theme settings in the backend “admin/appearance/settings/bootstrap” and then navigate to “Advanced” tab and there you will find BootstrapCDN version select box.

  • Go to the Modules section in the backend “admin/modules” and enable the “Bootstrap Library”.
  • Go to the Bootstrap Library setting from the backend “admin/config/development/bootstrap_library” and configure on which pages and themes you want to load the libraries (by default everything but admin/*)

Note: While BootstrapCDN (content distribution network) is the preferred method for providing huge performance gains in load time, this method does depend on using this third party service. BootstrapCDN is under no obligation or commitment to provide guaranteed up-time or service quality for this theme. If you choose to disable this setting, you must provide your own Bootstrap source and/or optional CDN delivery implementation.