Getting Started with Bootstrap 5 using Radix in Drupal

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

Radix is a Bootstrap base theme for Drupal that provides a solid foundation for building your website. It includes built-in Bootstrap 4 and 5 support, Sass, ES6, and BrowserSync. This makes it easy to create a website that looks great on all devices and is easy to maintain.

In this video, you’ll learn the following:

• Download and install Radix.
• Generate a Radix sub-theme.
• Integrate a Bootswatch theme in your site.
• Implement the Carousel component using blocks and paragraphs.
• Implement the Accordion component using paragraphs.
• Display articles in a Bootstrap grid using Views.

It’s best to use the notes below while following the video.

Get a copy of the code from GitHub.

Install Components

The Radix theme requires the Components module.

Download the module and install it before installing Radix.

$ composer require drupal/components:^3.0

Go and install the Components module before progressing.

Install Radix

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

$ composer require 'drupal/radix:^5.0'

2. Enable the Radix base theme.

You can do this using Drush:

$ drush then radix

Or, enable it by going to Appearance and clicking Install on Radix.

Create Radix Sub-theme

Radix comes with a Drush command to generate a sub-theme. You won’t have to copy and paste files manually.

First, make sure you have the Components module and the Radix theme installed. The command won’t work if Radix isn’t enabled.

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

Replace SUBTHEME_NAME with the name of your sub-theme and confirm that the --include path is correct.

Once the sub-theme has been generated, go and enable it. Run the drush then SUBTHEME_NAME command or click on “Install and set as default” from the Appearance.

Compile Bootstrap

If you take a look at your Drupal site now, it’ll look unstyled, and that’s because we need to compile Bootstrap. Radix doesn’t pull in Bootstrap via a CDN like other themes; instead you must compile it using npm.

Setting up Node and NPM is outside the scope of this tutorial. I recommend that you look at configuring nvm.

1. Open your terminal go to the sub-theme, and run the following command to download all the packages:

$ npm install

2. Adjust the config/proxy.js path for BrowserSync to work.

3. Run the following command to watch for changes:

$ npm run watch

Note: Only run the watch command if you’ve configured the proxy.js file correctly.

Run npm run dev to compile it, and when you’re ready to push to production run npm run production.

Configure Blocks

You must adjust the blocks and add them to the correct regions. Drupal doesn’t add the blocks into the correct regions.

This is important for the navbar to work correctly on mobile devices.

Go to Structure, “Block layout” and assign accordingly.

Navbar branding:

• Site Branding

Navbar left:

• Main navigation

Navbar right:

• User account menu

Header:

• Status messages
• Breadcrumbs
• Page title
• Help
• Primary tabs
• Primary admin actions
• Secondary tabs

Content:

• Main page content

Footer:

• RSS feed
• Powered by Drupal

Once the blocks have been assigned to the correct regions the site will look better.

Bootswatch

Bootswatch is a collection of free Bootstrap themes that are easy to use and customize. The Flatly theme is popular for its clean and modern design; let’s use it on the site.

Note: You’ll need to compile Bootstrap in your sub-theme for this to work. Make sure you can compile everything using npm.

Download Variables and Bootswatch

1. Click on Flatly and download _variables.scss and _bootswatch.scss.

2. Open src/scss/base/_variables.scss in your sub-theme and paste in the variables within _variables.scss.

3. Move _bootswatch.scss into src/scss and then add @import "bootswatch"; into main.style.scss.

4. Go and compile the changes using npm run dev.

Update Navbar Template

To work correctly, we must modify the navbar twig template for the Flatly theme.

Copy the following Twig templates from Radix into your sub-theme.

1. radix/src/components/navbar/navbar.twig
2. radix/src/components/section/header.twig
3. radix/src/components/page/page.twig

Copy these templates into your sub-theme and add them into src/components.

Open components/page/page.twig and change the include for header.twig.

  {% block page_header %}
    {% include '@SUB_THEME/section/header.twig' %}
  {% endblock %}

Open components/section/header.twig and change the embed for navbar.twig.

{% embed '@SUB_THEME/navbar/navbar.twig' with {
  container: 'fixed',
  color: 'dark',
  utility_classes: ['bg-primary'],
} %}

Open components/navbar/navbar.twig and adjust the navbar DIV.

<nav class="navbar navbar-expand-{{ navbar_expand }} justify-content-between navbar-{{ color }} {{ placement }} {{ utility_classes|join(' ') }}" data-bs-theme="{{ color }}">

Note: In the embed and include change @SUB_THEME to your sub-theme name.

Download and Install Twig Tweak

We’ll use the Twig Tweak module for some of the Twig templates. Download and install the module.

$ composer require 'drupal/twig_tweak:^3.2'

Twig Debugging

Go to Configuration, “Development settings and turn on “Twig development mode”.

This will tell us which template is being loaded.

Download and Install Paragraphs

We’ll use Paragraphs for a few components, go download and install it.

$ composer require drupal/paragraphs

Implement Carousel

Create Carousel Item Paragraph Type

1. Go to Structure, “Paragraph types” and create a “Carousel Item” paragraph type

2. Add the following fields to the paragraph type:

Label	Machine name	Field type
Caption	field_caption	Text (plain, long)
Image	field_image	Entity reference Reference type: Media Media type: Image
Title	field_title	Text (plain)

Create Carousel Block Type

1. Go to Structure, “Block types” and create a “Carousel” block type

2. Add the following fields to the block type:

Label	Machine name	Field type
Carousel items	field_carousel_items	Entity reference revisions Reference type: Paragraph Paragraph type: Carousel item

Template: carousel.twig

Create a Twig template at src/components/carousel/carousel.twig with the following code:

<div id="carousel--{{ content['#block_content'].id() }}" class="carousel slide mb-5" data-bs-ride="carousel">

  <div class="carousel-indicators">
    {% for item in content['#block_content'].field_carousel_items %}
      <button type="button"
              data-bs-target="#carousel--{{ content['#block_content'].id() }}"
              data-bs-slide-to="{{ loop.index0 }}" aria-label="{{ item.entity.field_title.value }}"
              class="{{ loop.first ? 'active' }}" {{ loop.first ? 'aria-current="true"' }}></button>
    {% endfor %}
  </div>

  <div class="carousel-inner">
    {% for item in content['#block_content'].field_carousel_items %}
      <div class="carousel-item {{ loop.first ? 'active' }}">
        {{ item.entity|view }}
      </div>
    {% endfor %}
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carousel--{{ content['#block_content'].id() }}" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carousel--{{ content['#block_content'].id() }}" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  {{ content|without('field_carousel_items') }}
</div>

Template: paragraph–carousel-item.html.twig

Create a Twig template at templates/paragraph/paragraph--carousel-item.html.twig with the following code:

{% block paragraph %}
  {% set image_uri = paragraph.field_image.entity.field_media_image|file_uri %}
  {% if image_uri is not null %}
    <img src="{{ image_uri|image_style('wide') }}"
         class="d-block w-100" alt="{{ paragraph.field_image.entity.field_media_image.alt }}">
  {% endif %}

  <div class="carousel-caption d-none d-md-block">
    <h5>{{ content.field_title }}</h5>
    <p>{{ content.field_caption }}</p>
  </div>
  {{ content|without('field_title', 'field_caption', 'field_image') }}
{% endblock paragraph %}

Template: block–inline-block–carousel.html.twig and block–block-content–carousel.html.twig

Create a Twig template at templates/block/block--block-content--carousel.html.twig and templates/block/block--inline-block--carousel.html.twig with the following code:

{% embed '@radix/block/block.twig' with {
  html_tag: 'div',
} %}

  {% block content %}
    {% include '@SUB_THEME/carousel/carousel.twig' with {
      content: content,
    } %}
  {% endblock %}

{% endembed %}

Note: Change @SUB_THEME to your sub-theme name.

Once everything has been configured it should look like this:

Implement Accordion

Create Accordion Item Paragraph Type

1. Go to Structure, “Paragraph types” and create a “Accordion Item” paragraph type

2. Add the following fields to the paragraph type:

Label	Machine name	Field type
Description	field_description	Text (formatted, long)
Title	field_title	Text (plain)

Create Accordion Paragraph Type

1. Go to Structure, “Paragraph types” and create a “Accordion” paragraph type

2. Add the following fields to the paragraph type:

Label	Machine name	Field type
Accordion items	field_accordion_items	Entity reference revisions Reference type: Paragraph Paragraph type: Accordion item

Template: paragraph–accordion.html.twig

Create a Twig template at templates/paragraph/paragraph--accordion-item.html.twig with the following code:

  <div{{ attributes.addClass(classes) }}>
    {% block content %}
      <div class="accordion mb-5" id="accordion--{{ paragraph.id() }}">
        {% for item in paragraph.field_accordion_items %}
          <div class="accordion-item">
            <h2 class="accordion-header" id="accordion-header--{{ item.entity.id() }}">
              <button class="accordion-button {{ loop.first ?: 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-item--{{ item.entity.id() }}" aria-expanded="true" aria-controls="accordion-item--{{ item.entity.id() }}">
                {{ item.entity.field_title.value }}
              </button>
            </h2>

            <div id="accordion-item--{{ item.entity.id() }}" class="accordion-collapse collapse {{ loop.first ? 'show' }}" aria-labelledby="accordion-header--{{ item.entity.id() }}" data-bs-parent="#accordion--{{ paragraph.id() }}">
              <div class="accordion-body">
                {% set description = {
                  '#type':   'processed_text',
                  '#text':    item.entity.field_description.value,
                  '#format':  item.entity.field_description.format,
                } %}
                {{ description }}
              </div>
            </div>

          </div>
        {% endfor %}
      </div>
      {{ content|without('field_accordion_items') }}
    {% endblock %}
  </div>
{% endblock paragraph %}

Create a paragraph field on a content type to use the accordion.

Once implemented, it should look like the below image:

Implement Bootstrap Grid

1. Go to Structure, Views and create a view and select Grid as the format.

2. Click on Settings next to Grid and adjust the settings like so:

Summary

If you’re looking for an advanced Bootstrap theme for Drupal that gives you absolute control, then look at Radix. Out-of-the-box, it offers useful front-end technology, such as compiling Bootstrap with Sass and using BrowserSync.