Getting Started with Bootstrap 4 using Radix in Drupal 8


📽 Video sections:

  • Install Radix (01:31)
  • Create sub-theme (03:30)
  • Enable sub-theme (05:22)
  • Compile Bootstrap (06:07)
  • Fix blocks and regions (07:23)
  • Using Browsersync (npm run watch) (13:00)
  • Using Radix Layouts (15:49)
  • Using Radix Layouts with Field Layouts (19:43)
  • Using Radix Layouts with Layout Builder (23:56)

Radix is a Bootstrap 4 powered theme which is set up out-of-the-box to compile the Bootstrap library locally. It is targeted towards advance front-end developers who want total control on how Bootstrap is loaded and comes with Browsersync and Font Awesome built-in. The theme doesn’t support loading Bootstrap via a CDN out-of-the-box. I’d recommend you look at the Barrio theme if you prefer to load everything through a CDN.

Because you’re compiling Bootstrap, you get the added benefit of being able to modify the _variables.scss which is used to customize Bootstrap and can control what SASS components get imported. By importing only what you need you can drastically reduce the size of the compiled CSS file.

The theme comes with a Drush command (Drush 8 only), drush radix "Theme name", which makes it easy to generate sub-themes. The sub-theme comes with a package.json which has all the required packages.

Just run npm install, then npm run dev to compile Bootstrap. It uses laravel-mix to compile everything so you don’t have to spend time configuring webpack files.

In this tutorial, you’ll learn how to install Radix, create a sub-theme, how to compile everything and learn about Radix Layouts.

Barrio is another Bootstrap 4 theme for Drupal 8 which you should check out. It can be configured to load Bootstrap through a CDN.

Getting Started

Before we can begin, go download the “Component Libraries” module and the Radix theme.

Run the following Composer command:

composer require drupal/components drupal/radix

Once you’ve download both the module and theme, enable them.

Create Radix Sub-theme

Now we need to create a Radix sub-theme. Luckily for us the theme comes with a Drush command which’ll create a sub-theme, so we won’t have to manually copy and rename files or folders.

First make sure you’ve enabled the Radix theme, it doesn’t have to be set as default but it needs to be enabled.

Then run the following Drush command:

drush radix "Theme name"

If you get the following error:

The drush command 'radix' could not be found.  Run `drush cache-clear drush` to clear the commandfile cache if you have installed new extensions.

Run drush cache-clear drush to clear Drush’s cache so the command appears. If you’re still getting the error make sure you’ve enabled Radix. You do not have to set it as the default theme, just enable it.

Warning: You must use Drush 8, not Drush 9!

The above mentioned command (drush radix) only works in Drush 8 not version 9. There’s currently an issue about the problem.

Compile Bootstrap 4 SASS in Sub-theme

Now at this point, we’re downloaded the required module and theme. We created a sub-theme, so the last thing to do is run npm install to download all the packages we need to compile Bootstrap 4 and our SASS files.

1. Open up your Terminal and go into your sub-theme and run npm install. You’ll need Node.js and npm installed on your machine.

cd /to/theme
npm install

2. Open up webpack.mix.js in your sub-theme and change const proxy = 'http://drupal.local'; to the URL of your local site. This is for the Browsersync functionality.

3. Run npm run watch to compile SASS. Use this command while developing because it’ll autoload the site when files change, saving you from refreshing the page.

If everything is working you should see something like this after running npm run watch.

 DONE  Compiled successfully in 3869ms                                                                                                                                       10:13:40 pm

                      Asset     Size                    Chunks             Chunk Names
/js/radix_webwash.script.js  475 KiB  /js/radix_webwash.script  [emitted]  /js/radix_webwash.script
css/radix_webwash.style.css  155 KiB  /js/radix_webwash.script  [emitted]  /js/radix_webwash.script
[Browsersync] Proxying: http://d8-local:8888
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.20.8:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Watching files...

Open package.json to see all the available npm run scripts:

  "scripts": {
    "postinstall": "find node_modules/ -name '*.info' -type f -delete",
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

The two important scripts are:

npm run watch

Use this script to automatically compile when a file is changed. This should be used locally while developing a site.

npm run production

This script should run when you’re ready to deploy to production. It’ll uglify the CSS and JavaScript file to reduce the size.

Modify SASS Files

The SASS files in your sub-theme are located in src/sass.

The subtheme.style.scss file is used to import all the SASS components. So if you want to remove some of Bootstrap’s components, you can do so from this file. Top tip, only import the components you actually need. This will keep your CSS files nice and lite.

The variables file located at src/sass/base/_variables.scss is the file you’ll need if you want to change a SASS variable. These variables are used to modify all sorts of stuff, such as color, fonts, headings, navbar, etc…

Once you change a variable don’t forget to recompile everything.

Enable Sub-theme

Once you run npm install, compiled SASS in your sub-theme, now it’s time to test the theme.

1. Go to Appearance and click on “Install and set as default” to enable the sub-theme

If you go to the homepage now, you should see a basic styled Bootstrap 4 site.

However, it doesn’t look right and that’s because the blocks are not in the right regions.

Add Blocks to the Right Region

Our current Bootstrap 4 site doesn’t look correct because we need to rearrange the blocks into the correct regions.

1. Go to Structure, “Block layout”.

2. Assign the blocks as follows:

Region: Navbar branding

  • Site branding

Region: Navbar left

  • Main navigation

Region: Navbar right

  • User account menu

Region: Header

  • Status messages
  • Breadcrumbs
  • Help
  • Page title
  • Tabs
  • Primary admin actions

Region: Content

  • Main page content

Region: Footer

  • Footer menu
  • Powered by Drupal

Now your Drupal site should look a lot nicer and the mobile navbar should work.

Desktop

 

 

Mobile

 

Radix Layouts

Radix Layouts is a companion module which you should use with the Radix theme. It ships a bunch of pre-built layouts which can be used with Display SuitePanels/Page Manager, Field Layouts and even Layout Builder module.

You can create your own layouts if you need to but this module offers a good selection of pre-built layouts.

To begin using the module, first download it using the following command:

composer require drupal/radix_layouts

Simply downloading and installing the module won’t give you any functionality. You’ll need to a module which implements the layouts, look at the following modules:

  1. Display Suite
  2. Panels/Page Manager
  3. Field Layouts (core)
  4. Layout Builder (core)

It should work with any module that integrates with the core module “Layout Discovery”.

Use with Field Layouts

1. Enable the “Field Layouts” module.

2. Go to a “Manage display” page on a content type

3. From the “Layout settings” section, select one of the layouts from the “Select a layout” drop-down.

Use with Layout Builder

1. Enable the “Layout Builder” module.

2. Go to a “Manage display” page on a content type and check “Use Layout Builder”.

3. Then click on “Manage layout” to change the layout.

4. Click on “Add section” and select the layout from the right column.

Note: Both “Field Layouts” and “Layout Builder” are experimental in Drupal 8.6. If you’re looking for something similar to “Field Layouts”, then look at “Display Suite“.

Summary

At this point, you have a good understanding on how to install and create your own Radix sub-theme. This theme is more for advanced front-end developers. You need to be comfortable using front-end tools such as NPM, SASS and Webpack. However, this theme gives you the most flexibility compared to others because you can modify the variables.scss file.

FAQs

Q: Can’t find the drush radix command in Drush?

The command only works if you’re running Drush 8. Check if you’re running Drush 9, if you are then it won’t work. You’ll need to use Drush 8.

Q: The drush en componts radix doesn’t work when I use Drush 9?

If you’re using Drush 9, you must use drush theme-enable to enable a theme.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

27 thoughts on “Getting Started with Bootstrap 4 using Radix in Drupal 8”

  1. Hans Nieuwenhuis

    Are there reasons to use the bootstrap theme in favor of the radix theme ?
    Or vice versa?
    I am in doubt whixh one to use.
    Bootstrap theme will support bootsyrap 4 soon also.

    Regads
    Hans

  2. Hans Nieuwenhuis

    If ypu look at #86 you can see that mark changed the plan.
    Several things have been moved to the wish list…

    1. Hi Hans,

      That comment doesn’t change anything. As far as I’m aware, there’s no Bootstrap 4 code in the theme at all.

      You can wait for the Bootstrap theme to update to BS4, but if you need to start a project now, then Radix is a good choice.

      Cheers,
      Ivan

      1. It changes everything actually. It’s not blocked on a massive re-architecture anymore.

        There’s no code in 8.x-4.x because I didn’t want people to post patches (i.e. “open” the public) when it wasn’t actually ready to receive development. I’ve been working on BS4 code locally however and I believe there should be code coming to the 8.x-4.x branch by the end of this week. I suspect we’ll have a beta within a couple of weeks and likely a full release within the next month.

  3. Are there any significant benefits to using a Bootstrap 4 based theme vs. a Bootstrap 3 based theme for folks building drupal sites?

    1. Hi Patrick,

      It really comes down to what you want to use Bootstrap 3 or Bootstrap 4.

      Bootstrap 3 is better suited for older browsers, I believe.

      Cheers,
      Ivan

  4. Hans Nieuwenhuis

    By region i meant the block regions which you can see by : Demonstrate block regions

    I think Radix has the filosofie to have one big region where the placement of content is done by using the layouts.
    I.e. layout builder or panels etc.
    According to the maintainer/developer ( arshadcn ):
    ” The idea behind Radix was to have one single region that ships by default and use Panels for layouts ”

    Whereas Bootstrap theme has real regions (like primary and secondary )

    1. We added a few more regions to the Radix 4 but the main content area is still one big region. For Drupal 7, this works best with Panels and layout builder for Drupal 8.

      As Ivan pointed out in the video, Radix gives you a bit more flexibility on how the Bootstrap framework is pulled in. You can modify the sass variables and recompile your CSS. The Bootstrap theme handles customization through the UI which is a good starting point and easy for new themers.

      Hope this helps,
      Arshad

      1. How do handle conditional layouts in Radix 4? Like setting it up so if there’s something in the right sidebar, then the page automatically goes from 100% to a 80/20 split? I know you can customize the layout on a single node with Layout Builder, but there’s no regions defined for right/left sidebar, so how would you automate that?

  5. Mr Adrian Joseph Versey

    Hi Ivan. I use composer and Drush (8) no problem. How ever I am having a problem getting node.js and npm to work.
    I am using ssh. Where do I install node.js ? Should it be outside the drupal directory? Any help would be much appreciated.

    Adrian.

  6. Hi Ivan, thanks for the reply. I have node installed globally the problem is when I am using ssh to install modules etc I can’t access node, when I type node –version I the message “command not found” when I exit ssh to my local file system and type node –version in terminal I get the version of node I have installed on my machine I just can’t get it to work when I am using ssh. Any help would be much appreciated.

    Adrian.

  7. Hi Ivan!

    I have followed your video and i have an error at the following step:

    Actually i’am using a Linux Shared hosting server with cpanel.
    Using Drush 8 as you suggested.
    I have SSH access.
    I have installed NVM (~/.nvm)
    Then i have installed Node.js and npm (latest stable version)
    NVM version: 0.34.0
    NPM version: 6.4.1
    Node version: 10.15.3

    When i navigate to the /themes/custom/yourtheme folder via SSH and type in npm install it starts to install the packages then at the end i get the following error:
    npm ERR! cb() never called.

    I cannot move to the next step and i have no idea how to solve this.

    By any chance do you have any idea what could be done in order to solve it? (i have read its a bug) Should i use older version of node.js?
    Can you please point me in the right direction?

    Thanks in advance!

    Best regards,
    Norbert

    1. Hi Norbert,

      I’ve never seen this error.

      Sorry but I think you’ll have to debug it further. Instead of compiling SASS on the server, why don’t you compile it locally and store the CSS in git. It’s not ideal, but it’s a workaround.

      Cheers,
      Ivan

  8. Instead of compiling SASS on the server, why don’t you compile it locally and store the CSS in git. It’s not ideal, but it’s a workaround.

    1. Hi Tukt,

      Yes, you can do that.

      But if you have multiple people working on the project, you’ll have to deal with merge conflicts with the stored CSS file and it’s easy to commit the non-minified CSS version.

      Cheers,
      Ivan

    1. Hi Chandra,

      Sorry, I don’t quite understand what you’re asking for?

      Do you want to change the container to container-fluid? Look in the page.html.twig to change it.

      Cheers,
      Ivan

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.