Categories
Uncategorized

Layout Builder and Bootstrap Classes

Layout Builder will replace Paragraph Bundles as the tool for building out webpages in OSU Drupal 9. We have also added the additional functionality of Bootstrap Layout Builder. This module gives us a lot more options than our paragraph bundles in Drupal 7 did. Hello 4 column layouts and much more!

Creating Layouts

My thought process for creating layouts to get what I want is to try the following methods in this order.

  1. Use the pre-built options provided by Layout Builder by using their column system and adding blocks.
    • You can divide up the page up to 6 columns
  2. If I can’t use the pre-built options or something from the Layout Builder Library, I then ask myself if I can use them, but just slightly tweak them.
  3. As a last resort, create something from scratch.
    • For a quick container to work in use the following settings:
      • 1 column layout
      • no gutters
      • no margin or padding on the block

This post will cover the second and third options and how to leverage Bootstrap to augment layout builder options to get the layout you’re looking for.

This is intended for folks who have a solid understanding of CSS and have created custom layouts, content types, and views in Drupal. If you can’t find what you need in the Layout Builder Library or using the pre-built options, then these classes can help you build your own layouts.

What is Bootstrap?

Bootstrap is library of code that is added to all of our websites. It includes a lot of styling and functionality that you can use instead of writing the CSS and/or JavaScript yourself.

I consult Bootstrap’s documentation when looking for something that I need. They have a robust search function and excellent navigation to find thing easily. We will continue to update our version of Bootstrap so we can leverage the new features that they roll out. As of the time of this writing, we are on 5.3.

Most of the classes I have been reaching for aren’t anything snazzy or exciting. I have used d-flex I don’t know how many times, but it’s just dead useful to be able to throw that class onto something and it gets me where I need to go.

I highly recommend reviewing how Bootstrap container and grid works to leverage this system to your advantage.

Helpful Classes

Here are my favorite classes that I have been reaching for:

  • Display
    • using d-grid is limited, since Bootstrap doesn’t have many classes for the properties of grid. But, it at least gets you started. I’ve had to write my own CSS for grid-template-columns and rows, which are the grid properties I use the most.
  • Flex (and oh look at that, it has classes for auto margins!)
    • I’ve mostly used this for…
      • centering easily (justify-content-center align-items-center)
      • putting multiple blocks into a 1 column and using flex to get the exact layout I’m looking for.
  • Spacing
    • Margins and padding and you can set different sizes for each breakpoint (sm, md, lg, xl, xxl). While you can set both of these properties on sections and blocks via the Layout Builder GUI, there are limitations since you can’t specify at what size you want them. I’ve found that if I am setting these more than 2rem (32 pixels) for desktop, I’ll want to set a different size for mobile.
    • You set the margin and padding by a number after the property you want to assign. It assigns a certain number of rems (reference chart for our spacing values). Using consistent spacing values allows you to make design decision quicker and provides a more polished look with consistent sizing, rather than using arbitrary values for each project or page.
  • I have the breakpoints printed out and sitting on my desk for quick reference, which I have found helpful. These breakpoints can be added to most of their utilities, which has made it much easier to get the exact layout I’m looking for.
    • For example, if you want a section to only have d-flex at larger sizes you’d add the class d-lg-flex.
  • I’ve found the sizing classes to be limited in their use, since they’re one of the few classes you can’t tack a breakpoint size onto. If you set the max-width to 80% for desktop, that generally has been too small for mobile. The one sizing class I have found helpful is w-100, as that (usually) forces something to fill the space it’s in.

Adding Classes to Layout Builder Sections

You can add classes to either a section, row or column of a section or a block. Where you add the class completely hinges on what you are trying to accomplish.

To add a class to a section or column, click on Configure Section #. From the 3 tabs in the off canvas editing menu, you want to click on the cog. From there, you can add to the section (it’s called the container), the row, or column.

Section (Container)

This is good for adding responsive spacing around the entire section or if you know there is a style that you’ll need for everything within that section. Rather than creating classes or on-off styles, I’ve been creating class names that reflect their functionality to allow me to re-use them for other sections.

Row

This div houses each column that you have specified for your layout. (It doesn’t necessarily have the row class on it.) I haven’t found a need to add classes on here as the Bootstrap layout system works well here. The only time I have added a class is I add the “row” class to this when it doesn’t otherwise to get some of the benefits for the children of row.

Column

This is where you can target a specific column of your layout, which can be powerful. I’ve added flexbox, grid, gap, margins and padding here, to just name a few. It’s great for when you want to add padding or margins on the sides when you have multiple blocks in one column and don’t want to set them for each individual block.

Adding Classes to Inline Blocks

First off, inline blocks in Layout Builder are different than the site wide custom blocks you can place via Structure > Block Layout. They are one off use blocks that you can’t clone or place on another page. Think of them as the smallest building block in this system that’s for a single page.

Adding classes to inline blocks are fantastic for applying styles to just one specific section of content. For inline blocks you can apply them at multiple levels: block, block title, and block contents.

You can add them by clicking on the Manage Attributes options in the contextual menu when you click on the pencil to edit the block.

Block

I’ve used this one the most as it is on the wrapper for the entire block, so it’s a great, quick easy way to target everything inside the block.

Block Title

You can choose to show or hide the block title, which can be a quick and easy way to structure your content. Block titles will always spit out as an Heading 2. A common way I see using this is to align the title according to my needs.

Block Content

I haven’t found much of a use for this one yet, as it is still not yet the direct parent of the code of your content, so flexbox and grid aren’t much use here. There are still 2 layers of HTML before you are at the content.

While there are some limitations to using Bootstrap classes, it is still an incredibly powerful library to lean on. It can expand the possibilities for layouts and appearance. It can also reduce having to write the same layouts from scratch repeatedly, which was common in Drupal 7 with its HTML structure.

Keep in mind that there are some Bootstrap options that require certain dependencies that the central distribution hasn’t enabled, usually due to performance as recommended by Bootstrap. If you run into that edge case, come on over to Open Lab and we can help you get started.

Print Friendly, PDF & Email