Build Layouts with Bootstrap and Layout Builder in Drupal

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

The above video will explore how to effectively utilize Bootstrap and Layout Builder to create powerful, responsive layouts in Drupal. Whether you’re a novice or looking to enhance your skills, this guide will walk you through the necessary steps to set up your Bootstrap theme and leverage the full potential of Layout Builder.

Introduction to Layout Builder and Bootstrap

Layout Builder in Drupal lets users create custom layouts visually. Combined with Bootstrap’s grid system and components, it makes building responsive, attractive designs easy.

Bootstrap Layout Builder module lets you quickly access Bootstrap classes via Layout Builder to customize containers, spacing, and animations.

Setting Up Radix Theme

To work with Bootstrap and Layout Builder, we first need a Bootstrap-based theme, Radix.

You can utilize any Bootstrap 5 based theme, such as Barrio, Bootstrap5, or even the standard Bootstrap theme. However, I prefer Radix.

Download and Install Radix

To set up Radix, you will need to follow these steps:

1. Download the Radix theme using Composer by running the following command:

composer require drupal/radix

2. Enable Serialization core module.

Creating a Sub-Theme

Creating a sub-theme allows you to modify styles and functionalities without affecting the core Radix theme.

Radix provides a Drush command for creating a sub-theme. Before using this feature, you must install Drush on your Drupal site.

NOTE: It’s recommended that you always create a sub-theme when you use Radix.

1.  create a sub-theme by running the following command:

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

NOTE: Make sure that the --include path to radix is correct.

2. Go to your theme: cd /path/to/SUBTHEME_NAME

Compiling Bootstrap with Node

Once Radix is set up, the next step is to compile Bootstrap using Node.js. This step is essential as Radix compiles Bootstrap locally rather than relying on a CDN. This means you need to have Node.js installed on your system.

You should use Node Version Manager (NVM) to manage your node versions.

To compile Bootstrap:

1. Navigate to your theme directory using the terminal.
2. Run nvm use to switch to the specified version.
3. Run npm install to install the necessary packages.
4. Use npm run dev to compile the assets for development.
5. For production, run npm run production to optimize the assets.

Once everything is compiled, make sure to clear the cache because your site should transition from this state, where there are no styles.

Here you can see the actual Bootstrap components.

Installing Bootstrap Layout Builder

With the Radix theme and Bootstrap compiled, the next step is to install the Bootstrap Layout Builder module. This module enhances the Layout Builder functionality by integrating Bootstrap components and styles.

To install the Bootstrap Layout Builder:

1. Download it by using this composer command;

composer require: 'drupal/bootstrap_layout_builder:^2.2'

2. Navigate to the Extend section and install it.

3. Ensure that the Bootstrap Styles module is enabled, providing additional styling options.

Configuration of Bootstrap Layout Builder

After installation, you can access the module’s configuration settings by going to Configuration and clicking on “Bootstrap Layout Builder.”

Here, you can define the available layouts, breakpoints and styles for your content types.

Click on the Styles tab and enable the features you want to control from Layout Builder. I recommend enabling all of them.

Bootstrap Styles Modules

The Bootstrap Styles module is a component of Bootstrap Layout Builder that provides Bootstrap’s core styling capabilities.

While it doesn’t include a user interface, the module’s configuration page allows access to and configuration of all style settings.

From this configuration page, you can adjust all bootstrap classes, add your own, or customize them.

Creating Basic Page Layout

Now that Layout Builder is configured, you can create your basic page layout. This involves selecting sections and components to build your design.

To create a basic page layout:

1. Navigate to the content type where Layout Builder is enabled.

2. Click on “Manage Layout” to access the layout builder interface.

3. Click “Add Section” button to choose a layout structure such as one, two, or three columns.

4. Adjust the section settings such as container type, gutters and also the grid sizes for desktop, tablet and mobile.

5. Click the Style icon to adjust background, typography, spacing, and more.

You will spend a lot of time adjusting things here, so it’s good to experiment with all the options.

6. Repeat the process to build out your layout as needed.

Once you have configured the section, click “Add section” and then click “Add block” to add blocks into the section regions.

Finalizing Your Layout

After adding and configuring all the necessary sections, review your layout to ensure it meets your design. Make adjustments as needed to achieve the desired look and functionality.

Radix Components

If you want to use the edge-to-edge container type or have your sections span the full width, you will need to control the container class that Radix adds.

Or you want your container to go full width:

Radix provides a set of pre-built components (Single-Directory Components) that align with Bootstrap’s framework, allowing you to create responsive and visually appealing designs efficiently.

To utilize Radix components:

1. Access the Radix components directory within your theme (themes/contrib/radix/components).

2. Identify the component you wish to use, such as buttons, cards, or modals.

3. Copy over the component into the Components directory in your theme.

Overriding Radix Components

We need to change a property on the page-content component to display a section edge-to-edge.

In the page.twig component we’ll need to change the following section:

  {% block page_content %} 
    {% include 'radix:page-content' with { 
      page_main_utility_classes: ['py-5'], 
      page_header_container_utility_classes: ['mb-3'], 
      **page_content_container_type: FALSE,** 
    }%} 
  {% endblock %}

To make this change, we need to override the parent component, which is Page, and then add this custom prop. Copy the Page component into your components directory.

1. Copy themes/contrib/radix/components/page into themes/custom/ww_radix/components/page

2. Adjust the `block page_content` section:

From this:

  {% block page_content %} 
    {% include 'radix:page-content' with { 
      page_main_utility_classes: ['py-5'], 
      page_header_container_utility_classes: ['mb-3'], 
    }%} 
  {% endblock %}

To this:

  {% block page_content %} 
    {% include 'radix:page-content' with { 
      page_main_utility_classes: ['py-5'], 
      page_header_container_utility_classes: ['mb-3'], 
      page_content_container_type: FALSE,
    }%} 
  {% endblock %}

Then most importantly, we need to change the template to call our new page component.

Open ww_radix/templates/page/page.html.twig and change {% include 'radix:page' %} to {% include 'ww_radix:page' %}

Clear the cache and you’re good to go.

Create Bootstrap Grid using Views

NOTE: If you want to learn more about Views, check out our comprehensive video tutorial “Getting Started with Views in Drupal“.

Let’s create a view that will display all the latest articles in a grid format.

To create a view for displaying articles:

1. Navigate to the “Structure” section in your Drupal admin panel.
2. Select “Views” and click on “Add new view.”
3. Define the view settings, such as the view name, display format, and content type.

Display Articles as Grid using Display Options

Integrating Bootstrap grids into your views enhances content presentation, ensuring it is responsive and visually appealing. This step involves configuring the grid settings within your view.

To add Bootstrap grids to your views:

1. Edit your view and navigate to the “Format” section.
2. Select “Grid” as the display format and configure the number of columns.
3. Adjust any additional settings to control responsiveness and spacing.

Grid Configuration Options

Bootstrap grids offer various configuration options, such as specifying the number of items per row based on screen size. This ensures that your layout adapts seamlessly across different devices.

For our example, we will select a grid and configure it like so:

NOTE: Check out the Bootstrap documentation to learn more about the grid system.

Add Fields to Views

Once your view is created, the next step is to add fields. Fields determine what content, such as titles, images, and summaries, will be displayed in your view.

To add fields to your view:

1. Edit the view you created and navigate to the “Fields” section.
2. Click “Add” to select the fields you want to display.
3. Configure each field’s settings, including labels, formatting, and visibility.

We added the following set of fields.

Adding View Block to Section

After setting up your view and adding fields, the next step is integrating the view block into your layout. This will allow your articles to be displayed on the desired page.

To add a view block to your layout:

1. Navigate to the page where you want to add the view.
2. Click on “Manage Layout” to access the Layout Builder interface.
3. Select “Add Block” and search for the view block you created.

Once everything is configured, you should see the articles displayed in a grid format on the front end.

Summary

This video explored the steps necessary to build layouts using Bootstrap and Layout Builder in Drupal. Each step contributes to a powerful and responsive design, from setting up the Radix theme to customizing components and creating views.

Key takeaways include:

• Utilizing Radix components for a cohesive design.
• Customizing the page-content component to meet specific layout needs.
• Creating views to display content effectively.
• Incorporating Bootstrap grids for responsive layouts.

Following these steps, you can create visually appealing and functional layouts tailored to your site’s needs. Combining Bootstrap and Drupal’s Layout Builder provides immense flexibility and creativity in content presentation.