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.6",
"npm-asset/bootstrap-icons": "1.13.1",
"npm-asset/bootswatch": "5.3.6"
},
"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.6",
"asset/bootstrap-icons": "1.13.1",
"asset/bootswatch": "5.3.6",
"composer/installers": "2.*"
},
"repositories": {
"asset-bootstrap": {
"type": "package",
"package": {
"name": "asset/bootstrap",
"version": "5.3.6",
"type": "drupal-library",
"extra": {
"installer-name": "bootstrap"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twbs/bootstrap/zipball/f849680d16a9695c9a6c9c062d6cff55ddcf071e",
"reference": "f849680d16a9695c9a6c9c062d6cff55ddcf071e"
}
}
},
"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.6",
"type": "drupal-library",
"extra": {
"installer-name": "bootswatch"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/thomaspark/bootswatch/zipball/c72edbf8ae5d3607cb3d07f56917feac654266fd",
"reference": "c72edbf8ae5d3607cb3d07f56917feac654266fd"
}
}
}
},
"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.
- starterkit for SASS compilation in one file.
- starterkit split for SASS compilation split by component.