If you haven't already installed the Drupal Bootstrap theme, read the Getting Started topic. Below are instructions on how to create a Drupal Bootstrap based sub-theme. There are several different variations on how to accomplish this task, but this topic will focus on the two primarily and most common ways.
You should never modify any theme or sub-theme that is packaged and released from Drupal.org, such as Drupal Bootstrap. If you do, all changes you have made will be lost once that theme is updated. Instead, you should create a sub-theme from one of the provided starterkits (this is considered a best practice). Once you've done that, you can override CSS, templates, and theme processing.
Choose a Starterkit
- Less Starterkit - uses the Bootstrap Framework source files and a local Less preprocessor.
- Sass Starterkit - uses the Bootstrap Framework source files and a local Sass preprocessor.
NOTE: Using the "CDN Starterkit" is the preferred method for loading Bootstrap CSS and JS on simpler sites that do not use a site-wide CDN. There are advantages and disadvantages to using a CDN Provider and you will need to weigh the benefits based on your site's requirements. Using a CDN Provider does mean that it depends on a third-party service. There is no obligation or commitment made by this project or these third-party CDN services that guarantees up-time or quality of service. If you need to customize Bootstrap, you must choose one of the Less or Sass Starterkits, compile the source code locally, and disable the "CDN Provider" theme setting.
WARNING: All locally compiled versions of Bootstrap will be superseded by any enabled "CDN Provider"; do not use both.
Once you've selected one of the above starterkits, here's how to install it:
- Copy over one of the starterkits you have chosen from the
./bootstrap/starterkitsdirectory into the
- Rename the directory to a unique machine readable name. This is your
sub-theme's "machine name". When referring to files inside a sub-theme,
they will always start with
THEMENAMEis the machine name of your sub-theme. They will continue to specify the full path to the file or directory inside it. For example, the primary file Drupal uses to determine if a theme exists is:
./THEMENAME/THEMENAME.info.ymland change the name, description and any other properties to suite your needs. Make sure to rename the library extension name as well:
- Rename the sub-theme configuration files, located at:
WARNING: Ensure that the
.starterkit suffix is
not present on your sub-theme's
.info.yml filename. This suffix is simply a
stop gap measure to ensure that the bundled starter kit sub-theme cannot be
enabled or used directly. This helps people unfamiliar with Drupal avoid
modifying the starter kit sub-theme directly and instead forces them to create
a new sub-theme to modify.
Enable Your New Sub-theme
In your Drupal site, navigate to
admin/appearance and click the
Enable and set default link next to your newly created sub-theme. Now that you've
enabled your starterkit, please refer to the starterkit's documentation page