Getting Started with Bootstrap 4 using Radix in Drupal 8

70 Comments / Drupal / By / March 15, 2020 / 6 minutes of reading


📽 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 --include="PATH_TO_RADIX_THEME" radix:create subtheme_name

For example:

drush --include="themes/contrib/radix" radix:create radix_subtheme

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.

Drush 9 is now fully supported in Radix 8.x-4.6.

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 Suite,  Panels/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 radix:create command in Drush?

First, make sure you’re using Drush 9.

Then make sure --include="themes/contrib/radix" is correct.

Related Posts

About The Author

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

70 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

    Reply
  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…

    Reply
    1. Ivan Zugec

      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

      Reply
      1. Mark Carver

        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.

        Reply
  4. Patrick Warn

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

    Reply
    1. Ivan Zugec

      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

      Reply
  5. 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 )

    Reply
    1. Arshad

      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

      Reply
      1. Tony

        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?

        Reply
  7. 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.

    Reply
  8. Adrian Versey

    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.

    Reply
  9. Norbert

    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

    Reply
    1. Ivan Zugec

      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

      Reply
  11. tukt

    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.

    Reply
    1. Ivan Zugec

      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

      Reply
    1. Ivan Zugec

      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

      Reply
    1. Ivan Zugec

      Hi Kanaan,

      Paragraphs is just a custom entity and field type. It has nothing to do with the theme.

      No matter which theme you use you’ll still need to style the paragraph.

      So to answer your question the theme doesn’t matter.

      Cheers,
      Ivan

      Reply
  14. efrain esparza

    I’m having trouble running the drush command to create a new sub theme due to the drupal 8/drush 9 issue. After going into several rabbit holes trying to figure that out, i gave up and decided to just copy over the files manually. However, having an issue with that as well. Not sure exactly which files I need to copy over/edit. Do you have a summary of how I can do this manually and/or know of a location i can grab these files from?

    Reply
  16. Ralf Eisler

    Hi Ivan,

    Thank you for the great tutorial!

    I have installed Radix in a Drupal 8 Lightning instance. The installation of the sub-theme worked great, according to https://docs.radixtheme.org/en/latest/radix-4/

    Now, I would like to change the Bootswatch theme. — There is a Drush command for Drupal 7 which does not work for Drupal 8:

    drush –include=”docroot/themes/contrib/radix” radix “my-theme” –bootswatch=my-bootswach-theme
    The “–bootswatch” option does not exist.

    Do you know how this could be accomplished in Drupal 8 with Drush 9?

    Reply
  17. Colin Wilson

    Really struggling with just one step.
    I’ve double checked everything I can, I’m using the latest Drupal 8, have installed composer, drush and drush launcher.
    I’ve installed components and Radix using composer using both the commands in your video, and also the command in your notes (php composer.phar require drush/components drush/radix)
    Installed component libraries and installed Radix from the Drupal administrator
    Executed drush cache-clear drush
    But when I try and run drush radix –help I keep getting the error that it cannot find Radix.
    I’ve been using Drupal 8 for a while, but this is my first foray into drush and the cli tools so I’m stumped.
    ANY help as to where to look and what to do would be HUGELY appreciated
    For info, I’m developing locally on a Mac OS 10.11 with MAMP

    Reply
  18. Robert

    HI I´m also struggling with basic install only with last drush 10.1 version.
    https://www.drupal.org/project/radix/issues/3092006
    I also tried to downgrade to drush 9.7.0 but no change, and the above patch only seams to work for 4.4 radix… and we are now on 4.6

    With older version this installed seams to work but we then had trouble with subthem JS = Uncaught TypeError: $ is not a function

    Any hints?

    Reply
  19. Ralf Eisler

    Hi Ivan,

    Thanks again for the great tutorial.
    I have onea question about Source Maps, which I can’t get to work.
    I tried to add the following code to the webpack.mix.js with not luck:
    if (!mix.inProduction()) {
    mix.webpackConfig({
    devtool: ‘source-map’,
    })
    .sourceMaps()
    }
    Did you make this work?

    Reply
  20. Joe

    Right out of the chute I am having trouble with the drush command. Am I making a common error?

    I am using a new Drupal 8 install from the preferred template project installed via composer.

    Installed by didn’t set as default the Radix theme.

    drush radix –help fails with radix not defined.
    —–
    /var/www/drupal$ ./vendor/bin/drush radix –help

    Command “radix” is not defined.

    Reply
    1. Ivan Zugec

      Hi Joe,

      Your command needs the –include parameter.

      drush –include=”PATH_TO_RADIX_THEME” radix:create subtheme_name

      And make sure you’re using Drush 9.

      Cheers,
      Ivan

      Reply
  21. Joe

    Thanks Ivan, I have now built and installed my sub-theme with the minor change to get the “drush radix” command to work.

    Next step, I have googled this a lot and have not found any tutorials. I now need to change the CSS attributes for my article teaser image to have a float: left and margin-right: 20px.

    I can do that in my web inspector but am having trouble figuring out how to do it the proper way.

    I see the default twig being used is from the core Radix theme by inspecting the displayed page.

    1) when I try to use my own twig in my sub-theme it doesn’t seem to be recognized.
    The suggested file names for twigs are

    FILE NAME SUGGESTIONS:
    * block–field-block–node–article–body.html.twig
    * block–field-block–node–article.html.twig
    * block–field-block–node.html.twig
    * block–field-block.html.twig
    * block–layout-builder.html.twig
    x block.html.twig

    so I tried to create a new one in my sub-theme called “block–field-block–node–article–teaser–image.html.twig” and minor variations like leaving the image out of it. For the content, I just copied the core twig for now without any mods. I then re-ran the “npm run watch” (I know I could have left this running in a spare shell) but it didn’t seem to recompile anything.

    And subsequent page displays do not show that being read.

    Reply
  22. Joe

    2) once I get that recognized, what it the best way to override a class attribute for an element?

    I guess I need to go back to square one and start researching from the ground up. I was hoping for a internet guide to show me though. Thanks for all of the help you’ve already provided.

    Reply
  23. Joe

    Thanks Ivan, FYI, here is are my working commands for Drupal 8.8.1 as of Feb 2020

    cd /var/www/drupal
    composer require drupal/radix;

    cd /var/www/drupal/web
    drush theme:enable radix

    drush –include=”themes/contrib/radix” radix:create “my Radix SubTheme”

    drush cr # maybe not needed but can’t hurt

    # Use the machine name for two below.
    drush theme:enable my_radix_subtheme;
    drush config:set system.theme -y default my_radix_subtheme

    cd /var/www/drupal/web/themes/custom/my_radix_subtheme
    npm install
    npm run watch

    Reply
  24. Hans Nieuwenhuis

    Hi Ivan ,
    I am using radix 4 now. A few days ago a new version was available.
    I updated the contrib theme from 4.6 to 4.7.
    To upgrade my subtheme i looked at the release notes and copied the files that where changed in the kits/default directory from the contrib theme to my subtheme.
    Then i updated the version number in radix_.info.
    Is that the way to do it or is there a more straight forward method ?
    Hans Nieuwenhuis

    Reply
  25. Nileema

    Hi Ivan,

    I have installed Redix theme and created a sub theme as per instructions.
    I have written styles for screens in src\sass\screen but somehow they are not getting applied.
    Can you explain why this is happening.

    Thanks

    Reply
    1. Ivan Zugec

      Hi Nileema,

      There could be many reasons why it’s happening.

      1, Check that you’re compiling SCSS correctly, 2, Check that the libraries.yml file is correctly configured and the compiled CSS is being loaded, 3, Check the actual CSS and make it works.

      Cheers,
      Ivan

      Reply
  26. Gonçalo

    Hi Ivan.

    Thank you for a great tutorial on the setup of Radix. I’ve searched the internet hi and low for more information on this promising theme but found very little and most focus on the same subject: installation and primary setup.

    There’s just no info on the best practices and use of this advanced theme.

    For instance, do you edit the “*.html.twig” files in the “templates” folder or the “*.twig” files in the “src/components/*” folder of the main theme.

    Either way, great tutorial and thanks for your work.

    Cheers!

    Reply
  27. Natalia

    Hi Ivan,

    Thanks for the great tutorial.
    I’m getting an error after running npm run watch.
    ERROR in ./src/sass/institutos.style.scss
    Module build failed (from ./node_modules/css-loader/index.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    @if $grid-row-columns > 0 {
    ^
    Undefined variable.
    I searched the internet and it seems that the solution is to downgrade to bootstrap 4.3.1 in package.json, but I’m already there.
    Any suggestions on how to fix this?
    Thank you!

    Reply
    1. Ivan Zugec

      Hi Natalia,

      The error says that “$grid-row-columns” is not defined. Why that’s happening, I don’t know.

      Have a look in the Radix issue queue to see if others have the same problem.

      Cheers,
      Ivan

      Reply
      1. PhilY

        Hi Ivan and all readers,
        That “$grid-row-columns” error is related to Boostrap 4.4 and above which introduces new variables that are not declared in Radix yet.
        To fix this, you’ll need to copy the Bootstrap _variables.scss content into your theme _variables.scss file (replacing all) .

        Reply
  28. Alessio

    Hello Ivan,

    I guess I am a bit confused about the
    npm run production
    command. I understand that it Uglyfies and Minifies the website resources, which will then be put into the /assets folder.
    But on my live website it seems I still need everything that is in the /src folder.

    This is a bit annoying as in my ideal set-up I’m looking to run a NPM command to give me an out-of-the-box deployable folder structure that doesn’t contain anything related to the development environment. Not sure if this makes sense…

    Thank you,
    Alessio

    Reply
  30. Pierreq

    Could you please provide instructions on how to install that theme without using drush or npm ?
    (I’m working on windows)

    Reply
      1. Pierre

        Hello Ivan and thanks for your reply,

        I will manually create the subtheme and install NPM on windows, and see where it leads me.

        I have one question though – once I got the subtheme running, how would I go about customizing it?
        Is there a CSS files for that, or will I have to go through SASS and recompile every time?

        Reply
  31. Nicholas

    drush radix “Themename” returns:
    Command “radix” is not defined.
    drush –include=”themes/contrib/radix” radix:create radix_themename rerturns:
    Command “radix” is not defined.

    I’m using Drupal 9 with Drush 10. Should i drop down to Drupal 8 and Drush 9? Or is it worth creating the subtheme manually?

    Reply
    1. Ivan Zugec

      It works with Drush 10 and D9.

      Make sure the include path is correct. It could be “web/themes/contrib/radix” if you installed Drupal using composer. I mention that in the FAQ section in the tutorial.

      Also make sure you enable Radix theme and components module first before running the command. Or you’ll get another error:

      “[error] The origin directory specified “/src/kits/default” was not found.”

      Reply
      1. Robert

        Is it possible to SPLIT the npm created CSS into 3 parts so only the required css is loaded for the required drupal pages?

        Eg. Front-page.css gets a optimized header.scss+footer.scss+frontpage.scss.

        Taxonomy and product pages get each their css so the the site will load slightly faster by not having to load the unused css, which would benefit Google lighthouses core web virtuals scores?

        Reply
        1. Ivan Zugec

          Hi Robert,

          “Is it possible to SPLIT the npm created CSS into 3 parts so only the required css is loaded for the required drupal pages?”

          This can be done by configuring whatever you’re using to compile Sass. Webpack, etc…

          “Taxonomy and product pages get each their css so the the site will load slightly faster by not having to load the unused css, which would benefit Google lighthouses core web virtuals scores?”

          Then you’ll need to define a library for each compiled CSS.

          Then you’ll need to write custom code and attach the library to specific pages.

          Here’s a Drupal Answers link explaining the exact thing. https://drupal.stackexchange.com/a/221522/247

          I personally don’t think it’s worth the effort you could introduce bugs in the code you wrote to attach the libraries. It seems like a lot of work just to get a score in “Google lighthouse”.

          My recommendation is make sure you’re using a CDN and caching JS and CSS assets and review your compiled CSS and make sure it’s not bloated.

          Cheers,
          Ivan

          Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

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