Getting Started with Bootstrap 5 using Radix in Drupal 10 (2024)

NOTE: This video uses Radix:5.x

Learn how to download and create a Radix sub-theme (Bootstrap 5) and create many components.

GitHub repo: https://github.com/WebWash/radix_boot...

Blog post: https://www.webwash.net/getting-start...

Table of contents

00:00 - Intro
02:59 - What we'll build
04:21 - Download Radix
04:52 - Download Components
05:34 - Enable Radix and Components
06:13 - Create Radix sub-theme
08:11 - Install sub-theme
09:24 - Compile Bootstrap
13:58 - Configure Block
17:09 - Understanding Components in Radix
22:51 - Implement Bootswatch
24:03 - Copy over _variables.scss file
24:47 - Copy over _bootswatch.scss file
26:48 - Turn on twig debug
28:04 - Override navbar
37:47 - Bootstrap Carousel
40:35 - Create Carousel block type
41:04 - Download Paragraphs
41:50 - Create Carousel item paragraph type
42:11 - Carousel item paragraph fields
45:37 - Create carousel block
47:54 - Configure Preview view mode on carousel item
50:04 - Add carousel block to frontend
51:51 - Create carousel.twig file
55:00 - Override block template for carousel
1:04:31 - Modify the carousel.twig
1:07:25 - Download and Install Twig Tweak
1:12:39 - Override paragraph carousel item template
1:15:27 - Add paragraph twig code for carousel item
1:21:30 - Install Layout Builder
1:21:46 - Enable Layout Builder on Basic Page
1:26:18 - Download and Install Layout Builder Iframe Modal
1:30:28 - Create test carousel page
1:30:38 - Create carousel on page
1:32:34 - Override inline block template
1:34:29 - Bootstrap Accordion
1:35:07 - Create accordion item paragraph type
1:35:51 - Create accordion paragraph type
1:37:03 - Create accordion test page
1:38:18 - Add paragraph field into page
1:39:32 - Override accordion paragraph template
1:45:29 - Download and install Devel
1:46:17 - Generate Test Content
1:46:56 - Create Latest Articles view
1:49:15 - Implement Bootstrap Grids in Views
1:49:54 - Create "Homepage" page
1:51:26 - Create custom image style
1:52:54 - Adjust grid settings
1:55:25 - Radix Layouts

Subscribe to our newsletter for updates: https://www.webwash.net/newsletter

Connect with us:
https://www.webwash.net/
   / webwashnet  
  / webwashnet  
  / webwashnet  
  / webwashnet  
  / webwash  
  / webwash  

#drupal #bootstrap