How to Build Modern Drupal Themes with Radix and Bootstrap 5

If you want to create a modern, flexible, and component-based theme for Drupal 10 or 11, the Radix theme is an excellent choice. It combines advanced technologies that speed up development and ensure your site is responsive, high-performing, and easy to maintain.

Why use Radix + Bootstrap 5?

• Component-based: simplifies reuse, maintenance, and scalability of theme elements.
• Modern technologies: Sass for advanced styling, BrowserSync for live reload, and Bootstrap 5 for responsiveness and visual consistency.
• Compatibility: ready for Drupal 10 and 11, with full support for core Single Directory Components (SDC).
• Optimized workflow: with Laravel Mix, BiomeJS, and other modern tools that improve productivity, organization, and control in development.

🔥 What comes with Radix?

• Fully integrated Bootstrap 5 for responsive and consistent design.
• Sass for CSS preprocessing and better code organization.
• Laravel Mix to simplify CSS and JavaScript builds.
• BrowserSync for faster development with live reload.
• BiomeJS for linting, formatting, and code standardization.
• A structure based on reusable components, making development more scalable, organized, and easier to maintain.

👉 Important: Radix is a base theme and should not be used directly on your site. The recommended approach is to create a custom sub-theme based on Radix, where you can safely apply your customizations, ensuring stability and easier updates.

For a complete and updated guide, check the official Radix documentation and the project page on Drupal.org.

How I used it to build this website theme:

One of the main advantages of using Radix as a base theme is leveraging a solid structure with many ready-to-use components, all based on Bootstrap 5.

This makes development much faster, since the entire Bootstrap component framework is already implemented in the theme. You only need to extend and customize it as needed.

Radix already delivers several Drupal templates using its own components. For example:

• Status Messages: uses the Alert component from Bootstrap.
• Menus: uses the Nav component from Bootstrap.
• Fields: correctly apply Bootstrap classes for consistent styling.
• And many others.

One of the features I used the most was the ability to add custom_classes directly to components. For each component, Radix allows passing an array of utility_classes, making it easy to apply styles like spacing and alignment.

For each component, the utility_classes array changes and follows the pattern of component name + modifier + utility_classes. For example, in the alert component, it is called alert_utility_classes.

{%
 include 'radix:alert' with {
   type: 'success',
   heading: 'VOSIX Systems!',
   dismissible: true,
   alert_utility_classes: ['pt-2', 'mb-4'],
   content: 'Contact us!'
 }
%}

Below is an example of how I apply custom_classes to a block. The custom_classes variable comes from a field in the block itself and is passed via preprocess to the template:

{%
  include 'radix:block' with {
    block_utility_classes: custom_classes ?: [],
  }
%}

Implementing an accordion, for example, was very simple. I created a custom block and added a paragraph field to manage the items. See how the template looks:

{% embed "radix:block" %}
  {% block block_content %}
    {% if content %}
      {{ content.body }}
      {% set title = content.field_title %}
      {% set accordion_items = [] %}
      {% for item in items %}
        {% set accordion_item = {
          title: item['title'],
          content: item['content'],
          stay_open: true
        } %}
        {% set accordion_items = accordion_items|merge([accordion_item]) %}
      {% endfor %}
      {% include 'radix:accordion' with {
        title: '',
        accordion_utility_classes: custom_classes,
        flush: true,
        items: accordion_items
      } %}
    {% endif %}
  {% endblock %}
{% endembed %}

Using Radix made the entire theme development process much faster and more organized. Additionally, it comes ready with commands to compile SCSS and JavaScript, further optimizing the workflow.

The Radix theme with Bootstrap 5 is a powerful solution for Drupal developers who want to build modern, responsive, and component-based themes that are reusable and well-structured. If you want to speed up development and deliver a high-quality site, Radix is a smart choice.

Need help creating, customizing, or improving your Drupal theme with Radix? At VOSIX Systems, we offer fast, professional, and tailored solutions so your website delivers high performance, scalability, and an outstanding visual experience.

👉 Contact us and take your Drupal project to the next level!