Skip to content
Snippets Groups Projects

UI Suite Bootstrap

A site-builder friendly Bootstrap theme for Drupal, using the UI Suite approach.

Use Bootstrap directly from Drupal backoffice (layout builder, manage display, views, blocks...).

See the docs folder for more detailed documentation on:

Requirements

This theme requires the following modules:

The Bootstrap library can be:

  • loaded locally
  • loaded by CDN
  • manually handled

When loaded locally, this theme requires the Bootstrap library to be placed in the libraries folder.

Optionally, this theme provides integration with Bootswatch, the Bootswatch library needs to be placed in the libraries folder if loaded locally.

Optionally, this theme provides integration with Bootstrap icons, icons needs to be placed in the libraries folder.

Install libraries manually

You can download the Bootstrap library on its GitHub page.

You can download the Bootstrap icons library on its GitHub page.

You can download the Bootswatch library on its GitHub page.

Install libraries with Composer

With Asset Packagist

If you are using the website Asset Packagist, the composer.json can be like:

{
    "require": {
        "composer/installers": "2.*",
        "oomphinc/composer-installers-extender": "2.*",
        "npm-asset/bootstrap": "5.3.7",
        "npm-asset/bootstrap-icons": "1.13.1",
        "npm-asset/bootswatch": "5.3.7"
    },
    "repositories": {
        "asset-packagist": {
            "type": "composer",
            "url": "https://asset-packagist.org"
        }
    },
    "extra": {
        "installer-paths": {
            "app/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ]
        },
        "installer-types": [
            "bower-asset",
            "npm-asset"
        ]
    }
}

This version of Bootstrap will only contain compiled CSS/JS and SASS files.

With a package repository

You can declare a custom package repositories, Example:

{
    "require": {
        "asset/bootstrap": "5.3.7",
        "asset/bootstrap-icons": "1.13.1",
        "asset/bootswatch": "5.3.7",
        "composer/installers": "2.*"
    },
    "repositories": {
        "asset-bootstrap": {
            "type": "package",
            "package": {
                "name": "asset/bootstrap",
                "version": "5.3.7",
                "type": "drupal-library",
                "extra": {
                    "installer-name": "bootstrap"
                },
                "dist": {
                    "type": "zip",
                    "url": "https://api.github.com/repos/twbs/bootstrap/zipball/e0032ae6a5a628a51a8552091816cec09b6434df",
                    "reference": "e0032ae6a5a628a51a8552091816cec09b6434df"
                }
            }
        },
        "asset-bootstrap-icons": {
            "type": "package",
            "package": {
                "name": "asset/bootstrap-icons",
                "version": "1.13.1",
                "type": "drupal-library",
                "extra": {
                    "installer-name": "bootstrap-icons"
                },
                "dist": {
                    "type": "zip",
                    "url": "https://api.github.com/repos/twbs/icons/zipball/ce0e49dd063243118a115f17ad1fe1fe7576d552",
                    "reference": "ce0e49dd063243118a115f17ad1fe1fe7576d552"
                }
            }
        },
        "asset-bootswatch": {
          "type": "package",
          "package": {
            "name": "asset/bootswatch",
            "version": "5.3.7",
            "type": "drupal-library",
            "extra": {
              "installer-name": "bootswatch"
            },
            "dist": {
              "type": "zip",
              "url": "https://api.github.com/repos/thomaspark/bootswatch/zipball/6c4ea3bbde9815576d8088436ea6e0032d112740",
              "reference": "6c4ea3bbde9815576d8088436ea6e0032d112740"
            }
          }
        }
    },
    "extra": {
        "installer-paths": {
            "app/libraries/{$name}": [
                "type:drupal-library"
            ]
        }
    }
}

This version will contain compiled CSS/JS and SASS files as well as all the files used for the development of Bootstrap.

Installation

Install as you would normally install a contributed Drupal theme. For further information, see Installing Drupal Themes.

Configuration

The theme has settings available on the theme settings page.

Configuration is provided by the UI Suite ecosystem modules.

Starterkits

The theme provides starterkits to help you generate your own subtheme.