Using Bootstrap in Drupal CMS

Published: 01 January 1970
on channel: WebWash
5,640
96

Learn how to use Bootstrap in Drupal CMS for easy site building and front-end theming.

In this stream, we cover:
Why you should use Bootstrap
Download and install Bootstrap5 and Radix themes
Create sub-themes
Integrate Bootstrap with Layout Builder
Use Bootstrap grids in Views

Join us and learn how to get the most out of Bootstrap in your Drupal CMS site.

Modules/themes
https://www.drupal.org/project/bootst...
https://www.drupal.org/project/radix
https://www.drupal.org/project/bootst...

Chapters
00:00 Preshow

Introduction
04:06 Introduction + Drupal CMS
06:35 Bootstrap5 theme
06:56 Radix theme
07:29 Bootstrap theme
09:43 Barrio Bootstrap theme
10:59 Bootstrap Layout Builder module

Preparing Drupal CMS
11:36 Theme changes to Drupal CMS
12:48 Turn off CSS and JavaScript aggregation
14:31 Turn off caching and turn on Twig debug
17:10 Install extra recipes

Bootstrap5
18:27 Download and install Bootstrap5 theme
23:42 Bootstrap5 theme settings
24:37 Create Bootstrap5 subtheme
25:16 What is a subtheme in Drupal

Compile Sass in Bootstrap5
28:07 Intro to Laravel mix
29:43 Add Laravel mix to subtheme
31:22 Create webpack.mix.js file
33:33 Run Laravel mix commands
36:23 Change Bootstrap variables
37:57 Add Bootswatch colors
Radix
42:18 Download and Install Radix theme
43:46 Create radix subtheme
46:11 Compile node packages in radix subtheme

Radix: Single-Directory Components (SDC)
51:07 Introduction to Single-Directory Components (SDC)
54:01 Q: Radix subtheme didn't work
56:06 Find components location
58:51 Intro to Drupal Radix CLI
59:58 Add Block component

Layout Builder in Drupal CMS
1:04:27 Intro to Layout Builder
1:05:11 Download and install Bootstrap Layout Builder
1:06:13 Bootstrap style settings
1:07:03 Bootstrap Layout Builder settings
1:08:00 Add Bootstrap section
1:09:04 Adjust columns in Bootstrap section
1:13:41 Add spacing directly in section
1:15:56 Add background image to section
1:19:14 Other Bootstrap options in section

Add Bootstrap Grid to Views
1:20:18 Access view
1:22:08 Change format to Grid

Ending
1:24:55 Recap
1:29:27 Ending

1:31:02 Post show


#drupal #bootstrap


On this page of the site you can watch the video online Using Bootstrap in Drupal CMS with a duration of hours minute second in good quality, which was uploaded by the user WebWash 01 January 1970, share the link with friends and acquaintances, this video has already been watched 5,640 times on youtube and it was liked by 96 viewers. Enjoy your viewing!