Drupal Bootstrap themes
Barrio is a Bootstrap 4/5, Drupal 8 Base Theme, using from roots twig templates to completely override Drupal's markup, generating full Bootstrap 4/5 markup and wiping out almost all Drupal 8 code from the HTML output. This theme has no style, rather it creates a layout to serve as a starting point for a Base Theme. At the moment, Bootstrap 4 in a Drupal project would be essentially a completely custom and 'on the top' theme. All the things that the Drupal Bootstrap project (provides would have to be done independently using newly written code for this, which you would do using many other themes such as classy. I have 2 websites: A static website with Bootstrap 5. A Drupal 8 site with Bootstrap 4. My question relates to my previous question: How does the text of the tooltip change when the button is cl. ./ use Drupal Component Utility Crypt; use Drupal Component Utility Html; use Drupal Component Utility SafeMarkup; use Drupal Component Utility Unicode; use Drupal Core Config BootstrapConfigStorageFactory; use Drupal Core Logger RfcLogLevel; use Drupal Core Render Markup; use Drupal Component Render MarkupInterface. If you have a 'Page Header' region, wrap it in a container-fluid div, which is wrapped.
Bootstrap is an open-source toolkit, which helps to develop the user-friendly design with cool responsiveness. To get more information please refer to their official website. Bootstrap has the most popular front-end component library, which is very quick and useful for users. We use Bootstrap because it provides a wide spectrum of the standard tools, that contain buttons, grid systems, responsiveness, dropdown, sizing, image styles and so so on. CSS classes - are the key tool to manage all the needed site elements. That’s cool, because you as a developer, shouldn’t put lots of effort into styling a particular form or button. On the other hand, if dig deeper, every simple and primitive website can be redesign to a unique style.
Sounds like a fairytale? No worries, step-by-step we will sort out with this fantastic tool.
Last but not least. Bootstrap is cool and super effective in case you never used Drupal before. This applies exclusively to the companies, that develop site designs but have no Drupal expertise, as Bootstrap can be easily integrated into Drupal site, by using the HTML wireframes. Likewise, it’s much easier to cooperate between designer and Drupal developers on the project planning stage, because Bootstrap terminology applies to any programmers.
One more benefit we get - is a ready Bootstrap theme for Drupal.
Getting Drupal 8 Bootstrap 4 theme working
Let us introduce you two bestsellers for you and your Drupal 8 website: Simple easy earth drawing.
Let’s get started from Radix
Radix is a free Bootstrap 4 based theme, which is set up out-of-the-box to compile the Bootstrap library locally. One important point, you need to take into the account - Radix doesn't support loading Bootstrap through a CDN (out-of-the-box). In case the project requires this feature we'd recommend you to consider the Barrio theme as a more appropriate one.
Thus, the compiled CSS file can be significantly reduced in case you will be importing only the data you need. In other words, no one forbids to compile Bootstrap by modifying the _variables.scss, that is necessary for managing SASS components to be imported.
Okay, that was a theory, but now let’s go to practice.
Drush and Radix
Please pay your attention Radix 8.x-4.6 theme cooperates with Drush 9, please visit this page to get to know more.
So, before starting any work please make sure you have enough capabilities to continue work with the theme installation:
- Please download a component libraries
- and actually Bootstrap Radix theme
With the help of composer use the following command:
composer require drupal/components drupal/radix
Please enable both module and theme after they will be downloaded and installed.
Sub-theme
A good Drupal practice is creating your theme as a SUB THEME in case you need to modify the basic Drupal theme. Here is documentation that will help you to deeply understand the importance of using sub-themes in Drupal.
The provided Drush command below allows us to automatically setup sub theme, instead of renaming files or folders.
The provided Drush command below allows us to automatically setup sub theme, instead of renaming files or folders.
Run the following command, but before doing this please make sure that Redix theme is enabled:
drush --include='themes/contrib/radix' radix:create radix_subtheme
(Path 'themes/contrib/radix' is just an example)
Compile Bootstrap 4 SASS in Sub-theme
Just a quick check if the provided steps above were successfully followed:
1.1. Download the require module and theme
1.2. Set the downloaded Bootstrap theme as a sub-theme.
The next stage is downloading of all the packages (please make sure that Node.js and npm installed on your local machine) we need to compile SASS files for Bootstrap 4 by running the following command:
1.1. Download the require module and theme
1.2. Set the downloaded Bootstrap theme as a sub-theme.
The next stage is downloading of all the packages (please make sure that Node.js and npm installed on your local machine) we need to compile SASS files for Bootstrap 4 by running the following command:
cd /themes/custom/radix_subtheme/
npm install
npm install
For the Browsersync functionality, change const proxy = 'http://drupal.local'; to the URL of your local site, in the webpack.mix.js in your sub-theme.
There also can be used npm watch command to compile SASS, with the help of it, the site will be autoloading the site during file saving.
There also can be used npm watch command to compile SASS, with the help of it, the site will be autoloading the site during file saving.
The following message will be displayed in case everything is correctly done:
Besides, in the package.json you can see the available npm run scripts:
The last but not least, let us remind two important scripts to use:
npm run watch and npm run production. The last one will help you, during deploying changes to production, significantly reduce CSS and Javascript.
npm run watch and npm run production. The last one will help you, during deploying changes to production, significantly reduce CSS and Javascript.
Sub-theme enabling
After the successful running of the npm install and compiling SASS in your sub-theme, welcome to check your theme. In the “Appearance” tab please find a section to select a theme as “Install and set as default”. Please refresh your homepage to see a basic styled Bootstrap 4 site.
Barrio Bootstrap 4 theme
Drupal 8 Bootstrap 4 Subtheme
The first step is downloading of the Barrio theme for your Drupal 8 site, let’s use for it, composer:
composer require drupal/bootstrap_barrio
Barrio as a Sub-theme
Drupal 8 Bootstrap 4
The quickest and easiest way of creating the sub-theme is pulling Bootstrap via a CDN. Let’s overview it more detailed.
- In the bootstrap_barrio directory copy the subtheme directory into /themes/custom.
- Rename the subtheme directory to a random name, in our case it will be barrio_custom.
Please keep in mind to replace in the sub-theme bootstrap_barrio_theme to barrio_custom. - After that, please rename the following files:
- Then, in barrio_custom.info.yml need to rename the sub-theme and the libraries section from bootstrap_barrio_subtheme to barrio_custom.
From this: To this: - After that, go to barrio_custom.theme (previously _bootstrap_barrio_subtheme.theme) and rename the following function:
// From:
bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
// To:
barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface,$form_state) - In the config/schema/barrio_my.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) file change the following:
// from:
bootstrap_barrio_subtheme.settings:
// to:
barrio_custom.settings: - In color/color.inc file please change the following:
// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview', - And the last step, in the js/global.js change the following:
// From:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To:
Drupal.behaviors.barrio_custom = { - Almost done, guys. So now, please open the “Appearance” tab and set the Barrio theme as by default. After the home page reloading it should look like this:
We believe that this information about Drupal 8 bootstrap themes will help you to make the right decision in choosing the appropriate theme for your Drupal 8 website. Out-of-box tools are easily configured and in 100% they will work correctly. Great site responsiveness, inputs, buttons - everything is perfect configurable. And other important and benefit factor - it is free. Yes, you would say that Bootstrap 4 sites are very recognizable, and yes, we agree with you, but, applying the advanced configurations you will achieve incredible results.
LastPass is an online password manager and form filler that makes web browsing easier and more secure.
We learn you on how to install Drupal 8 Bootstrap theme on your site as a sub-theme, and now you are free to interact with cool Bootstrap capabilities, that you can read about here.
See you in the next tutorial! Good luck and take care.
Your Golems.
Updated:
People mostly search Google for ‘drupal 8 bootstrap 4 theme‘ and ‘bootstrap 4 drupal‘ so we prepared Collection of Best Drupal 8 Bootstrap 4 Themes in 2020. Enjoy!
Meipaly is a super Drupal 8 Theme for Designers, Artists, Freelancers and for all other agencies. The template is perfect to showcase your projects or work in the best light. Meipaly is highly suitable template for companies that offer Web Design, Digital Marketing, SEO Services and all other internet marketing and services related agencies. Meipaly template have 5 homepages which is included in the purchase and they all are fully editable, you can easily change all of them to fit your needs.
2. Martis
Martis is a multipurpose Drupal 8 Ecommerce theme using Drupal commerce. It features advance product attribute variations with different product types, Product reviews, product attributes, cart and all you need for your next online commerce shop. This responsive ecommerce template built with bootstrap 4 will be ideal for any web developers to customize and make their own site become one of the top online shopping sites since this theme has a great combination of a clean, modern, minimalist design and a number of powerful features.
Elix theme is modern and professional business Drupal theme with fuly responsive design. Elix is a super Drupal 8 Theme for Designers, Artists, Freelancers and for all other agencies. The template is perfect to showcase your projects or work in the best light. Elix template have 5 homepages which is included in the purchase and they all are fully editable, you can easily change all of them to fit your needs.
4. Nova
Nova is a Creative & Modern Parallax One Page Drupal 8 is a perfect template for creative agencies, freelancers, graphic designers, illustrators, photographers or any kind of creative is now able to create a quick & easy portfolio to showcase their work with a unique and creative touch. Responsive based on Bootstrap. This is one page for placing your information. All files and code has been well organized and nicely commented for easy to customize.
Celia is a modern and sleek creative Drupal designed especially for creative studios, agencies, and freelancers. We took care of each element to looks different and clean in all browsers. It comes with multiple homepage layouts and other sub-pages that you’ll need to start your business or even to redesign your current website.
6. Nation
Nation is fully featured with one & multi pages Drupal theme. It is very simple, minimal design that you can build whatever you like with this template. Be a Business, Portfolio, Blog, Web Agency, One Page, Brand Shop, Photography, Freelancers… Nation looks awesome in Desktop, tablet, mobile phone.
Uxima theme is modern and professional business Drupal theme with fuly responsive design. A great candidate for any type of website, for personal or business use, Uxima is easy to use and highly customizable. Designed with user friendliness in mind, Uxima sports a distinctly unique, modern look. The theme has its own super powerful theme control panel with lots of useful options and tools to manage your site: Block builder, customize, slider, etc.
8. Winnex
Winnex – Business Consulting Drupal 8 Theme. It’s not just ordinary Drupal theme, its a new look of soft and clean professionalism for the Consultancy or Business. These designs combine creativity with simplicity on each page. This Drupal theme is suitable for all Consultancy & Business centers and corporate business. This theme is built and suitable for any business operating in the Consulting and Finance industry. Financial Advisors, Insurance Brokers, Accountants, Lawyers, Consultants or other Finance and Consulting related businesses, this is the theme for you.
Oveltyshop is fully Responsive and Retina Ready Drupal 8 Theme suitable for shops and eCommerce websites. It comes wit 6 different bautiful Home page layouts. Since it is responsive, the layout will adapt to different screen sizes which will make your website be compatible with any device such as smart phones, tablets or desktop computers.
10. Wosh
Wosh is a multipurpose Drupal 8 theme with Ecommerce integration using Drupal commerce. Featuring different product types, Product reviews, product attributes, cart and all you need for your next online commerce shop. This responsive ecommerce template built with bootstrap 4 will be ideal for any web developers to customize and make their own site become one of the top online shopping sites since this theme has a great combination of a clean, modern, minimalist design and a number of powerful features.
White Label is fully Responsive and Retina Ready Drupal theme. You can use it for every business like startups, web, agencies, web services, web businesses, web agency, fintech, creative agencies. This theme is built on Bootstrap 4 Framework and works perfectly on desktop, tablets and mobile phones.
12. EM
EM is a premium Drupal 8 theme with an outstanding design that will perfectly suit any blogs, magazines or other publishing websites. A theme with a mobile first design will make your website looks gorgeous on any device, from cell phones to tablets to laptops and computers. Em is packed with awesome features that will help you create an amazing content on your site.