Bootstrap Layout Builder (3 Column Example) | v2.0.0

Build responsive pages in minutes!

Adds responsive grid support, with major UX enhancements to Drupal 8's core - Layout Builder module. Currently, this module supports Bootstrap 3/4 and 5.

An exciting new feature lets you define a base class, so it can adapt to any other grid-based frontend framework!

FEATURES

  • Mobile Friendly: Comes prepackaged with 3 breakpoints; Mobile, Tablet, Desktop with the flexibility to add, edit and delete existing ones.
  • Section Settings: While creating layouts, add a containing wrapper (uncontained, contained or flush widths), with a row and column(s) 1-12, to each layout builder "Section".
  • Customizable UI: Each layout has a number of options that are defined from the modules configuration page. These are presented to the user while using the the bootstrap layout builder UI.
  • Background Image/Video: Section's support backgrounds out of the box that support colors that you can define from the admin panel, background images and local video files.
  • Advanced Settings: The advanced mode allow you to customize the container, row and columns classes so you can any other needed classes.

REQUIREMENTS

Any theme that utilizes the Bootstrap (or alike) framework grid system and classes.

V1.x:

In order to support background media on layout builder sections, we currently require the following modules (Thank You!):

V2.x:

Bootstrap Styles Which is used to build the styles' plugins!

INSTALLATION

Install like any other contributed Drupal module.

See: https://www.drupal.org/docs/8/extending-drupal-8/installing-contributed-... for further information.

composer require drupal/bootstrap_layout_builder

CONFIGURATION

After enabling the module:

  • Go to the Settings tab at the modules configuration page, and complete the required mappings for both; image and local video entities & fields.
  • If you are using Layout Builder Restrictions module go to Content Type -> Manage display -> Select View mode -> Layouts available for sections -> then enable bootstrap_layout_builder Layouts (Cols from 1 to 12).

RECOMMENDATION

Use this module with Layout Builder Blocks

SCREENSHOTS

Bootstrap Layout Builder Breakpoints

Bootstrap Layout Builder Layouts

Bootstrap Layout options

What next?

V3 is coming with a ton of new features and integrations, stay tuned!

Dexalo

Supporting organizations: 
Development and maintenance
Partially supported v2 development

Project information

Releases