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

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

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:

Modules:

👥 Connect with us

#drupal #bootstrap

[godwin]

Hi Ivan! I successfully follow your 3-rd lesson. Thank you for your "slowing down", your lesson is excellent. Actually I learn not just web-design with you, but English as well, that you help me much with. Awesome! Thank you! ;)

[pgermain]

Thanks, really good stuff here! Loved your 3 parts show!

[darren]

Bro these live streams are awesome. If you have a regular scheduled time for them it'll help build your audience. Doing this consistently also helps you with the youtube algorithm as well. Then you can tell people about them in the Drupal Slack channel. Also, don't be shy about telling people to like the video and hit the notification bell.
Drupal adoption needs you Ivan :-)

[sandraperez]

Thank you for this amazing live site build, I could completed all lessons successfully. :)

[godwin]

Ivan, could you show us in the next session how to create a blog for a community (multiple users) using the same Demo site as an example?

[taralaya]

hi your teaching is amazing, can you show the charts in drupal importing csv data

[JT-ivnd]

Hello everyone. I presume that the answer would be no, but there is no way to add the img-fluid class using display suite instead of saas? Thank you.

[musthavechannel]

Hi Ivan,
Thanks for another quality video.

I have a question which could be unrelated to this particular project but it is common among all web projects. Can you please suggest a revolution slider type slider for Drupal 8. The most powerful feature of rev slider is the backend slide editor using which the admin can add any sort of animations to slide layers using a timeline. I have found one such slider, "Mage slider", but it only deals with layer entry/exit transitions but I cannot move the text over time by specifying a start and end position on the screen.
I'm pretty sure most of Drupal site builders have come across this requirement at some point in time. Your suggestions will be of great value.

Thanks.

[motasemhanani]

these are different from drupal 10 and 11
im having a problem customizing my site :/

[jamesrstone]

I have to say you make me laugh all the time with the external commentary about what is going on around you that is affecting your video recording. Seriously "live"