Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel
Tags: drupal, bootstrap
Published: 2021-06-02 06:53:27

Get notified when new tutorials are published. [Subscribe to our newsletter](https://www.webwash.net/newsletter/).

{% youtube rePIlTFrza0 %}

**Don't forget to subscribe to our [YouTube channel](https://www.youtube.com/channel/UCKcUKWDTlwYnghpwLE_ltMQ) to stay up-to-date.**

Video sections:

*   [01:39](https://www.youtube.com/watch?v=rePIlTFrza0&t=99s) Discuss bugs from last live stream
*   [09:37](https://www.youtube.com/watch?v=rePIlTFrza0&t=577s) Create custom module for layouts
*   [19:33](https://www.youtube.com/watch?v=rePIlTFrza0&t=1173s) Review layout code
*   [22:04](https://www.youtube.com/watch?v=rePIlTFrza0&t=1324s) Start creating custom layout
*   [25:37](https://www.youtube.com/watch?v=rePIlTFrza0&t=1537s) Create layout plugin class
*   [28:00](https://www.youtube.com/watch?v=rePIlTFrza0&t=1680s) Create twig template for layout
*   [31:46](https://www.youtube.com/watch?v=rePIlTFrza0&t=1906s) Install custom module
*   [33:46](https://www.youtube.com/watch?v=rePIlTFrza0&t=2026s) Delete inline block template (no longer needed)
*   [37:36](https://www.youtube.com/watch?v=rePIlTFrza0&t=2256s) Discuss what needs to be implemented in new layout
*   [39:05](https://www.youtube.com/watch?v=rePIlTFrza0&t=2345s) Implement custom code in new layout
*   [42:49](https://www.youtube.com/watch?v=rePIlTFrza0&t=2569s) Debug build method in layout class
*   [47:53](https://www.youtube.com/watch?v=rePIlTFrza0&t=2873s) Override the build method in layout class to add custom classes
*   [54:08](https://www.youtube.com/watch?v=rePIlTFrza0&t=3248s) Review Bootstrap 4 grid system and necessary classes
*   [57:37](https://www.youtube.com/watch?v=rePIlTFrza0&t=3457s) Create custom method to determine grid width
*   [1:03:04](https://www.youtube.com/watch?v=rePIlTFrza0&t=3784s) Fix "Add block" button
*   [1:11:15](https://www.youtube.com/watch?v=rePIlTFrza0&t=4275s) Discuss implementing carousel
*   [1:14:55](https://www.youtube.com/watch?v=rePIlTFrza0&t=4495s) Discuss bug with Paragraphs module and block types
*   [1:17:43](https://www.youtube.com/watch?v=rePIlTFrza0&t=4663s) Create Carousel block type
*   [1:22:12](https://www.youtube.com/watch?v=rePIlTFrza0&t=4932s) Download Inline Entity Form
*   [1:23:14](https://www.youtube.com/watch?v=rePIlTFrza0&t=4994s) Create Carousel item block type
*   [1:25:21](https://www.youtube.com/watch?v=rePIlTFrza0&t=5121s) Create Carousel items field
*   [1:27:20](https://www.youtube.com/watch?v=rePIlTFrza0&t=5240s) Configure the Inline Entity Form widget
*   [1:33:25](https://www.youtube.com/watch?v=rePIlTFrza0&t=5605s) Start implementing Bootstrap carousel markup
*   [1:34:27](https://www.youtube.com/watch?v=rePIlTFrza0&t=5667s) Create new carousel layout
*   [1:42:16](https://www.youtube.com/watch?v=rePIlTFrza0&t=6136s) Customize Carousel item entity
*   [1:52:14](https://www.youtube.com/watch?v=rePIlTFrza0&t=6734s) Implement preprocess function
*   [2:05:31](https://www.youtube.com/watch?v=rePIlTFrza0&t=7531s) Implement markup changes in Twig
*   [2:16:49](https://www.youtube.com/watch?v=rePIlTFrza0&t=8209s) Change image style size
*   [2:19:52](https://www.youtube.com/watch?v=rePIlTFrza0&t=8392s) Create carousel Sass file
*   [2:23:30](https://www.youtube.com/watch?v=rePIlTFrza0&t=8610s) Discuss next live streams

In the show notes below, I outline what we implement in part 2 of the Drupal live site build. We start off by fixing a few bugs, which I introduced and didn't notice until I started playing around with the site after the first video. For example, we couldn't drag-and-drop any of the card components because I overrode the inline-block template. 

Part 2 (this video) is a little more advanced because we create a custom module, implement two layouts and implement a `hook_preprocess_HOOK`. 

So we start off by creating a Row layout which fixes the bug from part 1 and we implement the [Bootstrap Carousel](https://getbootstrap.com/docs/4.1/components/carousel/#with-captions) component (clients love carousels) using block types.

**💻 Get a copy of the built site from [GitHub](https://github.com/WebWash/drupal-bootstrap-live-demo-site).**

📖 Read the full tutorial, [Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel](https://www.webwash.net/?p=14441)