Using Bootstrap in Drupal CMS

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

In the above video, we’ll explore how to use Bootstrap for Drupal CMS.

If you’re looking for easier site-building and front-end theming, Bootstrap is a great tool.

We’ll cover everything from setting up your themes to using Bootstrap within Drupal’s Layout Builder and Views.

Bootstrap in Drupal

Bootstrap is well-supported within the Drupal community. It offers numerous modules and themes, as well as many pre-built components that help developers create attractive, responsive sites quickly.

We’ll specifically look at two themes: Bootstrap5 and Radix. We will also explore how to integrate Bootstrap with Drupal’s Layout Builder using Bootstrap Layout Builder and how to use Bootstrap grids within Drupal Views.

Preparing Your Drupal CMS

Before diving into the themes, we must make a few configuration changes in Drupal CMS for front-end theming. These settings will help you see changes immediately and debug any issue.

1. Turn Off CSS and JavaScript Aggregation: Drupal combines all CSS and JavaScript files by default for performance reasons.

This aggregation makes it harder to see the specific files you’re modifying.

To turn this off, go to Configuration, then Performance and uncheck Aggregate CSS and JavaScript files.

2. Disable Caching and Enable Twig Debugging: Drupal’s caching system can also hinder development by preventing changes from showing up immediately.

Go to Configuration, then Development, click Development Settings and uncheck Cache pages for anonymous users.

Then, turn on Twig debugging by clicking on Debug mode.

This will add comments to your page’s HTML source, showing the path of the twig templates that create each component.

This makes finding and overriding templates much easier.

3. Install Extra Recipes: For this walkthrough, we also installed a few extra recipes to add content to the site. These recipes, Events, News, and Blog, can be installed from the Extend menu.

Using Bootstrap5 Theme

Let’s configure and use Bootstrap5 theme. This theme is a solid base for building a Drupal site with Bootstrap.

1. Download and Install Bootstrap5: You can download the Bootstrap5 theme using Composer with this command:

composer require drupal/bootstrap5

Then, navigate to Appearance and install Bootstrap5 as your default theme.

2. Bootstrap5 Theme Settings: After installation, you can access the theme settings.

Here, you can add classes to the container and adjust navigation and footer options.

2. Create a Bootstrap5 Subtheme: It is best practice to create a subtheme to make more significant changes without directly modifying the core theme.

Click on the Create Subtheme button within the theme settings.

This creates a new folder in the themes/custom folder that is based on the Bootstrap5 theme.

A subtheme in Drupal acts as a child theme, inheriting all the functionalities of its parent theme while allowing you to modify it safely.

Compiling Bootstrap in Bootstrap5 Subtheme

The Bootstrap5 theme encourages compiling Sass locally using Node.js.

Here’s how to do it within your new sub-theme:

1. Introduction to Laravel Mix: To compile CSS and Javascript, we will use Laravel Mix, which is a wrapper around Webpack.

Laravel Mix is known for its ease of setup and how it streamlines the asset compilation process.

2. To add Laravel Mix to a Subtheme, you must first install Node.js using NVM (Node Version Manager).

Then, in your subtheme directory, use the command npm init to create a package.json file. Then use the command npm install laravel-mix to install Laravel Mix.

3. Create webpack.mix.js File: In the root of your subtheme, create a file named webpack.mix.js with the following code:

let mix = require('laravel-mix');

mix.sass('scss/style.scss', 'css/');
mix.options({
  processCssUrls: false
});

This tells Laravel Mix to compile your Sass files in css/style.scss and output the compiled CSS into the css directory.

1. Run Laravel Mix Commands: You can use these commands to compile your CSS:

• npx mix: Compiles your assets.
• npx mix watch: Watches for file changes and automatically recompiles.
• npx mix --production: Compiles and compresses assets for production.

2. Change Bootstrap Variables: Inside your subtheme, you’ll have access to the Sass variables that Bootstrap uses. You can make changes here and recompile.

3. Add Bootswatch Colors: To quickly change the look and feel of your website, download a Bootswatch theme and copy its Sass variables into your theme.

This gives you a professionally designed color scheme and style. In your main SCSS file, import the Bootswatch variables before the Bootstrap variables and load the Bootswatch styles after Bootstrap.

Using Radix Theme

Next, let’s look at the Radix theme, which is a more advanced Bootstrap-based theme.

1. Download and Install Radix: Download Radix using Composer:

composer require drupal/radix

2. Create a Radix Subtheme: Unlike the Bootstrap5 theme, Radix doesn’t have a theme creation tool in its settings.

You must create it with the Radix Drush command:

drush --include="web/themes/contrib/radix" radix:create SUBTHEME_NAME

NOTE: Make sure the --include="web/themes/contrib/radix" path is correct.

This will create the subtheme’s basic structure.

3. Compile Node Packages in Radix Subtheme: Navigate to the subtheme in the terminal and run npm install.

To compile your assets run the following:

• npm run dev
• npm run watch
• npm run production

Radix: Single-Directory Components (SDC)

Radix uses Single-Directory Components (SDC), which are now part of Drupal core. SDCs allow you to encapsulate a component’s template, CSS, and JavaScript into a single directory.

1. Introduction to SDC: SDCs help organize and maintain your components by keeping all their parts in one place.

2. Find Components Location: Radix stores its components in its theme directory under components.

3. Intro to Drupal Radix CLI: The Drupal Radix CLI tool allows you to copy existing components into your subtheme or generate new ones.

This CLI tool is an npm module that you can install globally npm i -g @drupal-radix/cli.

You will then run the command drupal-radix list.

To copy a component into your subtheme you can use the command drupal-radix add <component_name>

4. Add Block Component: For example, you can copy the Radix block component to your subtheme using this command: drupal-radix add then select Block.

Layout Builder in Drupal CMS

Let’s see how you can integrate Bootstrap with Layout Builder in Drupal using Bootstrap Layout Builder.

1. Download and Install Bootstrap Layout Builder:

Download this module with:

composer require drupal/bootstrap_layout_builder

Then, go to Extend and enable Bootstrap Layout Builder.

2. Bootstrap Style Settings: Go to Configuration and then Bootstrap Style Settings. Here, you can configure which styles will be available in Layout Builder.

3. Bootstrap Layout Builder Settings: Go to Configuration then Bootstrap Layout Builder Settings. Here you can configure your layout breakpoints and column settings.

4. Add Bootstrap Section: When you create a new layout using Layout Builder, you will see an option to add a section using Bootstrap layouts. You have the option to configure the number of columns in this section.

5. Adjust Columns in Bootstrap Section: You can configure the size of the columns in the section for various device types such as Desktop, Tablet and Mobile. This lets you control how the layout appears on different screens.

6. Add Spacing Directly in Section: Once your columns are defined, you can configure spacing to control the margins and padding of the whole section.

7. Add Background Image to Section: You can also add a background image to a section using Drupal’s media library.

8. Other Bootstrap Options in Section: You can further customize your sections by adding borders and shadows using built in classes.

Add Bootstrap Grid to Views

Finally, let’s use Bootstrap’s grid system in Drupal Views.

1. Access Your View: Go to Structure, Views, and edit a view. In this example, we’ll edit the “Latest” view.

2. Change Format to Grid: In the Format section, change the format to Grid. After that, click on Settings for the Format.

• Uncheck “Automatic width”, “Default column classes” and “Default row classes”.
• In “Custom row class”, add row, and in “Custom column class”, add col-12 col-md-6.

Summary

In this guide, we covered:

• Why you should use Bootstrap
• Downloading and installing the Bootstrap5 and Radix themes
• Creating sub-themes
• Integrating Bootstrap with Layout Builder
• Using Bootstrap grids in Views

By using Bootstrap with your Drupal CMS site you can speed up development while creating a responsive website.

Combining these tools and techniques will give you greater control over the look and feel of your Drupal site.

This guide has helped you understand how to use these powerful tools and the core concepts behind them.