Drupal11 create Subtheme using Bootstrap

First need to download bootstrap theme to drupal with following command

composer require ‘drupal/bootstrap:^5.0’

Create a new directory “custom” in /web/themes. 

Then copy “bootstrap_subtheme” from /web/themes/contrib/bootstrap/subthemes/bootstrap_subtheme to /web/themes/custom 

Rename the following directory & files from bootstrap_subtheme to yourname:

/web/themes/custom/bootstrap_subtheme directory to /web/themes/custom/yourname

bootstrap_subtheme.theme to yourname.theme —- (missing in drupal 11 so ignore it for now if you do not need it, you can create it later if need hook_preprocess_*() hook_theme_suggestions_*())

bootstrap_subtheme.info.yml to yourname.info.yml

bootstrap_subtheme.libraries.yml to yourname.libraries.yml

/config/install/bootstrap_subtheme.settings.yml to /config/install/yourname.settings.yml

/config/schema/bootstrap_subtheme.schema.yml to /config/schema/yourname.schema.yml 

Edit the file yourname.info.yml

name: YourName

type: theme

description: ‘Your Description.’

version: VERSION

core: 8.x

base theme: bootstrap

libraries:

– yourname/global-styling

Delete the following:

# Information added by Drupal.org packaging script on 2018-08-09

version: ‘8.x-4.17’

core: ‘8.x’

project: ‘bootstrap’

datestamp: 1533828192

Edit /config/schema/yourname.schema.yml

# Schema for the configuration files of the Bootstrap Subtheme.

yourname.settings:

type: theme_settings

label: ‘Yourname settings’

Edit /js/global.js line 10:

Drupal.behaviors.yourname = {

Enable SubTheme

Once you have finished manually creating your SubTheme, enable it in /admin/appearance.

NOTE: 

Once you are done with above items you also need to set bootstrap library 

Local or using CDN

If you want to setup local

You will:

Download Bootstrap locally

Put it inside your theme

Register it in *.libraries.yml

Attach it globally via *.info.yml

Clear cache

Get Bootstrap locally (choose ONE)

Option A (recommended): npm

Best if you want updates or SCSS.

cd web/themes/custom/your_theme

npm init -y

npm install bootstrap

This creates:

node_modules/bootstrap/dist/

Option B: Manual download

No Node.js required.

Download Bootstrap 5.x from getbootstrap.com

Copy files into your theme:

/web/themes/custom/your_theme/bootstrap-5.3.8-dist

your_theme/

 ├─ bootstrap-5.3.8-dist/css/bootstrap.min.css

 └─ bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js

Then in you your_theme.libraries.yml

global-styling:

  version: VERSION

  js:

bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js: {}        —   Add line

js/global.js: {}

  css:

component:

   bootstrap-5.3.8-dist/css/bootstrap.min.css: {}  —   Add line

   css/style.css: { weight: 100 }

   css/colors.css: { weight: 99 }

Clear cache

Open browser DevTools → Network → CSS

You should see:

bootstrap.min.css

Also test:

<div class=”container mt-5″>

  <button class=”btn btn-primary”>Bootstrap works</button>

</div>

If this styles correctly, Bootstrap is loaded.

Add a class in twig file

<aside{{ sidebar_first_attributes.addClass(‘my-custom-class’) }}>

  {{ page.sidebar_first }}

</aside>

For adding multiple classes

<div{{ wrapper_attributes.addClass(‘item-list’,’list-group-horizontal’) }}>

Adding page title class to body tag

Create a file yourtheme.theme file in you theme if missing then copy following code

<?php

use Drupal\Component\Utility\Html;

/**

 * Implements hook_preprocess_html().

 */

function geoapp_preprocess_html(array &$variables) {

  $route_match = \Drupal::routeMatch();

  $title = ”;

  // Get the page title safely.

  if ($node = $route_match->getParameter(‘node’)) {

if ($node instanceof \Drupal\node\NodeInterface) {

   $title = $node->label();

}

  }

  elseif ($route_match->getRouteObject()) {

$title = \Drupal::service(‘title_resolver’)

   ->getTitle(\Drupal::request(), $route_match->getRouteObject());

  }

  if (!empty($title)) {

// Sanitize title to valid CSS class.

$class = ‘page-title-‘ . Html::cleanCssIdentifier(strtolower($title));

$variables[‘attributes’][‘class’][] = $class;

  }

}

Theme file override for a dashboard view

views-view-table–dashboard.html.twig