Apply bootstrap for drupal projects

We all know that nowadays responsive design is a must for every website that we build. If you want to use Drupal for a website you wish to implement, there is an easy and simple way to do that. I’ll assume that you already have a basic installation of Drupal 7 on your local machine and also have some basic knowledge about this CMS.

What you need

Firstly, we need some prerequisites before we start. Here’s what you need:

We now have to move the downloaded theme and module in our corresponding directories.

  • Bootstrap 3 Theme goes into var/www/html/*site_name*/sites/all/themes
  • jQuery Update goes into var/www/html/*site_name*/sites/all/modules
Theme activation

Activate your theme by navigating to “Appearance” from your admin menu and click “Enable and set as default”. Refresh your page, resize it and see the Bootstrap theme doing its job.

So far, so good! But, what if we need to customize this theme? Altering the core code is not really a good idea; for example, if a new update for the theme is released, and we’ve modified some template pages, styles or scripts, all this work will be lost. Don't worry, because there is something called sub-theming.

Sub-theming the downloaded theme

A sub-theme inherits its base theme. In a few words, our custom theme inherits the installed Bootstrap theme. This allows us to modify all the things we need, and not lose the changes on the next update.

In your Bootstrap theme there is a folder called “bootstrap_subtheme”. Copy it in your theme directory and rename it. I've called mine “custom_bootstrap”. Navigate to your new sub-theme and rename the file “bootstrap_subtheme.info.starterkit” to “subtheme_name.info” (in my case it’s custom_bootstrap.info). Open the file and modify the name and description to whatever you may want.

Download and extract the Bootstrap source code in your sub_theme directory (current version is 3.3.2). Also, rename your extracted folder to simply “bootstrap”, not “bootstrap 3.3.2”. This is mandatory because in the next step we’ll compile the less style file and this searches for a bootstrap folder in your sub-theme. Now, in your sub-theme folder, go to less/ and there you’ll find a style.less file. To compile it, I run the following command:


 $ lessc style.less > var/www/html/*site_name*/sites/all/themes/*subtheme*/css/style.css

This will override the existing *subtheme*/css/style.css file.

If you don’t have the less compiler installed here is the command:


 $ sudo apt-get install node-less

Notice! If you encounter an error saying “NameError: variable @link-hover-decoration is undefined in /*subtheme_name*/bootstrap/less/scaffolding.less” don’t panic. It is an error thrown by the *subtheme_name*/less/variables.less because it does not contain the variables within the latest version of Bootstrap.

Just go to https://github.com/twbs/bootstrap/blob/master/less/variables.less, copy the source code and replace it in your *subtheme_name*/less/variables.less file. Recompile.

Enable Bootstrap for our sub-theme

Almost there! Now we just have to make our sub-theme use the Bootstrap source code that we’ve downloaded. Open your “subtheme_name.info” file and uncomment the script lines under Method 1.


; ;----------------------------------
; ; METHOD 1: Bootstrap Source Files
; ;----------------------------------
;
; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
;
 scripts[] = 'bootstrap/js/affix.js'
 scripts[] = 'bootstrap/js/alert.js'
 scripts[] = 'bootstrap/js/button.js'
 scripts[] = 'bootstrap/js/carousel.js'
 scripts[] = 'bootstrap/js/collapse.js'
 scripts[] = 'bootstrap/js/dropdown.js'
 scripts[] = 'bootstrap/js/modal.js'
 scripts[] = 'bootstrap/js/tooltip.js'
 scripts[] = 'bootstrap/js/popover.js'
 scripts[] = 'bootstrap/js/scrollspy.js'
 scripts[] = 'bootstrap/js/tab.js'
 scripts[] = 'bootstrap/js/transition.js'

Activate our new sub-theme

Once again, go to “Appearance” in your admin menu, and click “Enable and set as default” on your custom sub-theme. To be sure that everything has worked, open the style.css file and add at the end “body {background: lightblue; }”. Refresh the page and if you don’t see any change clear the cache.

There you go! You now have a fully customizable and responsive sub-theme that uses the latest version of Bootstrap.

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

1. What is ASSIST Software's development process?  

The Software Development Life Cycle (SDLC) we employ defines the following stages for a software project. Our SDLC phases include planning, requirement gathering, product design, development, testing, deployment, and maintenance.

2. What software development methodology does ASSIST Software use?  

ASSIST Software primarily leverages Agile principles for flexibility and adaptability. This means we break down projects into smaller, manageable sprints, allowing continuous feedback and iteration throughout the development cycle. We also incorporate elements from other methodologies to increase efficiency as needed. For example, we use Scrum for project roles and collaboration, and Kanban boards to see workflow and manage tasks. As per the Waterfall approach, we emphasize precise planning and documentation during the initial stages.

3. I'm considering a custom application. Should I focus on a desktop, mobile or web app?  

We can offer software consultancy services to determine the type of software you need based on your specific requirements. Please explore what type of app development would suit your custom build product.   

  • A web application runs on a web browser and is accessible from any device with an internet connection. (e.g., online store, social media platform)   
  • Mobile app developers design applications mainly for smartphones and tablets, such as games and productivity tools. However, they can be extended to other devices, such as smartwatches.    
  • Desktop applications are installed directly on a computer (e.g., photo editing software, word processors).   
  • Enterprise software manages complex business functions within an organization (e.g., Customer Relationship Management (CRM), Enterprise Resource Planning (ERP)).

4. My software product is complex. Are you familiar with the Scaled Agile methodology?

We have been in the software engineering industry for 30 years. During this time, we have worked on bespoke software that needed creative thinking, innovation, and customized solutions. 

Scaled Agile refers to frameworks and practices that help large organizations adopt Agile methodologies. Traditional Agile is designed for small, self-organizing teams. Scaled Agile addresses the challenges of implementing Agile across multiple teams working on complex projects.  

SAFe provides a structured approach for aligning teams, coordinating work, and delivering value at scale. It focuses on collaboration, communication, and continuous delivery for optimal custom software development services. 

5. How do I choose the best collaboration model with ASSIST Software?  

We offer flexible models. Think about your project and see which models would be right for you.   

  • Dedicated Team: Ideal for complex, long-term projects requiring high continuity and collaboration.   
  • Team Augmentation: Perfect for short-term projects or existing teams needing additional expertise.   
  • Project-Based Model: Best for well-defined projects with clear deliverables and a fixed budget.   

Contact us to discuss the advantages and disadvantages of each model. 

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2025 ASSIST Software. All rights reserved. Designed with love.