How to Drupal- Load Bootstrap locally with bootstrap library module

This tutorial will show you on how to install and configure the Bootstrap Library module to load the Bootstrap files locally within your computer or hosting on the drupal framework. If you developing your website offline or you prefer to faster load of bootstrap, your bootstrap library files must be loaded locally to drupal. By default, CDN (Content Delivery network) will load Bootstrap CSS and JS from respective sites.

This tutorial includes 4 main steps:

1. Disable CDN(Content Delivery Network).
2.Download & install Bootstrap library module.
3.Download Bootstrap.
4.Override CSS.

 

1. Disable CDN(Content Delivery Network).

To disable CDN, go to Appearance from Drupal administration site and select settings from bootstrap_subtheme. This subtheme created in last drupal tutorial Installing drupal subtheme.

Load Bootstrap locally

 

From theme settings window, select Advanced tab and change CDN provider to none.

Load Bootstrap locally

 

Clear all Cache from Administration menu >> Configuration >> Performance.

Load Bootstrap locally

 

Once you reload your drupal site, you will find that no more bootstrap library provided through CDN.

Load Bootstrap locally

 

2.Download & install Bootstrap library module.

Download Bootstrap library module from http://www.drupal.org/project/bootstrap_library.

Load Bootstrap locally

 

To install the Bootstrap library module, go to Extend Window and select install new module.

Load Bootstrap locally

 

Upload a module by browsing the downloaded module and click install.

Load Bootstrap locally

 

Once you finish the installation, click or tap Enable newly added modules.

Load Bootstrap locally

 

Search for Bootstrap Library from modules (Extend) window and check Bootstrap Library from the list. Select Install.

Load Bootstrap locally

 

3.Download & Configure Bootstrap.

Download the bootstrap from http://getbootstrap.com/getting-started/#download.

Load Bootstrap locally

 

Create a new folder and name it “libraries” on C:\\xampp\htdocs\drupal. Extract the bootstrap folder to libraries.

Load Bootstrap locally

 

Rename the file bootstrap-3.3.x to bootstrap.

Load Bootstrap locally

 

Navigate to Configuration >> Development >> Bootstrap Library. Specify the Themes visibility to bootstrap_subtheme and Check both CSS files and Javascript files to load from the library and Save the configuration.

Load Bootstrap locally

 

Now the bootstrap library will load to your site locally.

Load Bootstrap locally

 

4.Override CSS.

To override base theme CSS with subtheme CSS, copy “overrides.min.css” from themes\bootstrap\css\3.3.7 to themes\bootstrap_subthemes\css folder.

Load Bootstrap locally

 

Edit bootstrap_subtheme.library.yml from themes\bootstrap_subthemes\ by including css/overrides.min.css: {} above the css/style.css: {}.

Load Bootstrap locally

 

Now all set to load Bootstrap locally with bootstrap library module.

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...