Display Builder Bootstrap Recipe

This recipe extends the Display Builder CMS recipe to provide a ready-to-use Bootstrap experience in Drupal thanks to UI Suite Bootstrap and UI Suite modules.

Introduction

• UI Suite Bootstrap

A site-builder-friendly Bootstrap theme. Use Bootstrap parts (components, helpers, utilities, and layouts) directly from the Drupal back office (with Display Builder) in a low-code way.

• UI Suite provides a cohesive set of modules to implement full design systems in Drupal.
• Display Builder leverages the full UI Suite API in a modern visual builder.

Recipe documentation

First see general Drupal recipe documentation:

• Drupal recipes
• Getting started

Then for reference Display Builder documentation:

• Display Builder documentation

Installation

• Start with Drupal 11.4+, only new website with profile minimal is supported

composer create-project drupal/recommended-project:~11.4.8 drupal_bootstrap
cd drupal_bootstrap

Quick Icon libraries Setup

UI Suite Bootstrap support Bootstrap icons, here is a quick setup, for more information see UI Suite Bootstrap documentation.

Enable asset packagist, see Drupal documentation:

composer require oomphinc/composer-installers-extender:^2

You can accept (y) if composer ask:

Do you trust "oomphinc/composer-installers-extender" to execute code and wish to enable it now?

Install Bootstrap Icons:

composer config repo.asset-packagist composer https://asset-packagist.org
composer config --merge --json extra.installer-types '["npm-asset", "bower-asset"]'
composer config --merge --json extra.installer-paths '{"web/libraries/{$name}":["type:drupal-library", "type:npm-asset", "type:bower-asset"]}'
composer require npm-asset/bootstrap-icons:^1.13.1

Quick Recipe Setup (11.4+ only)

Install the recipe:

composer require drupal/display_builder_bootstrap:^1.1 drupal/display_builder:^1.0.0-beta8

Install Drush (recommended):

composer require drush/drush

Drupal Installation

Recipe is meant for a new website and can not be applied on an existing profile, only minimal profile is supported.

• Install the Drupal Minimal profile

For example, with DDEV and Drush:

ddev config --project-type=drupal11 --docroot=web
ddev drush si -y minimal

• Apply this recipe (Drupal 11.4+ only)

Run this command with DDEV, use ddev exec:

ddev exec dr recipe ../recipes/display_builder_bootstrap

If the command succeeds, you should see the following output:

[OK] Display Builder with Bootstrap applied successfully

Important: Clear the Drupal cache after applying the recipe.

ddev drush cache:rebuild

Visit your website, for example with DDEV:

ddev launch

Login as admin to your website:

ddev drush uli