Drupal Live Site Build (Part 3) - Create Bootstrap Grid using Views and Display Related Content

1:45:02
243
19
0
0
6
Share
Jul 13, 2020

Part 3 of the Drupal live site build series using Bootstrap.

📖Show notes: SOON

💻Demo site code: https://github.com/WebWash/drupal-bootstrap-live-demo-site

🔥Drupal 8 Site Building Masterclass sale $99 🔥
https://www.webwash.net/product/drupal-site-building-masterclass/

Table of contents:
00:00 Introduction
02:52 Review what we'll build
03:40 Mention where to get show notes and copy of site
10:18 Create portfolio content type
14:36 Configure portfolio content type using layout builder
17:54 Add Display Suite classes
24:57 Add img-fluid style onto element using SCSS
30:30 Implement portfolio view
36:34 Create card view mode on portfolio
41:23 Implement Bootstrap Card component markup
47:06 Using Field Group module to create elements
53:13 Display views items in Bootstrap grid
57:49 Bootstrap spacing classes
01:00:35 Make fields clickable
01:10:04 Implement related block view
01:11:38 Add views block region via layout builder
01:13:45 Create portfolio category vocabulary
01:14:19 Create portfolio category field
01:17:02 Add "Content ID" contextual filter
01:21:48 How to display the views query
01:24:17 Add "Has taxonomy term ID" contextual filter
01:28:02 Hide block if no results are returned
01:30:44 Add random sort to view
01:35:56 Add height 100% style to card component
01:37:59 Ending and questions

Links:
- Bootstrap spacing: https://getbootstrap.com/docs/4.5/utilities/spacing/

Modules:
- Token (https://www.drupal.org/project/token)
- Field group (https://www.drupal.org/project/field_group)
- Display Suite (https://www.drupal.org/project/ds)

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

👥 Connect with us
https://www.webwash.net/
https://www.youtube.com/c/webwashnet
https://twitter.com/webwashnet
https://www.facebook.com/webwash/
https://www.instagram.com/webwash/

#drupal #bootstrap

Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.