Display Builder Bootstrap

This recipe extends the Display Builder Base 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 (Layout Builder, Manage Display, Views, Blocks, Flags, and more) 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.

Documentation

Drupal recipe documentation:

• https://www.drupal.org/docs/extending-drupal/drupal-recipes
• https://project.pages.drupalcode.org/distributions_recipes/getting_started.html

Display Builder documentation:

• https://project.pages.drupalcode.org/display_builder

Installation

• Start with Drupal 11.3+

composer create-project drupal/recommended-project drupal_bootstrap
cd drupal_bootstrap

Quick Icon libraries Setup

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

Install with NPM:

mkdir -p web/libraries
cd web/libraries
npm init -y
npm i bootstrap-icons
mv node_modules/bootstrap-icons .
# Back to Drupal root.
cd ../..

Alternative solution

Or enable asset packagist, see Drupal documentation.

Quick Recipe Setup

Full recipe documentation.

Quick summary:

composer config allow-plugins.drupal/core-recipe-unpack true
composer require drupal/core-recipe-unpack
composer config --merge --json extra.installer-paths '{"recipes/{$name}":["type:drupal-recipe"]}'
echo '/recipes' >> .gitignore

Temporarily require development versions of some modules:

composer config minimum-stability dev

Install the recipe:

composer require drupal/display_builder_bootstrap:^1.0.0 drupal/display_builder:1.0.x-dev

Install Drush (recommended):

composer require drush/drush

Quick Drupal Installation

• 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

Run this command with DDEV, use ddev exec:

ddev exec -d /var/www/html/web php core/scripts/drupal recipe /var/www/html/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