Complete Guide to Installing and Using Twitter Bootstrap as Drupal 8 Theme

Bootstrap is a popular web development framework developed by Twitter and available under MIT License. You can use it to build the theme for your Drupal 8 website.

The Bootstrap toolkit has everything you’d need to build a web page including shortcodes for CSS, breadcrumbs templates, tooltips, and navbars.

For Drupal 8, you’d have to use the Bootstrap module which implements Bootstrap 3 framework. If you’re using CDN, it will download the necessary files from the jsDelivr CDN when loadingthe web pages.

In this tutorial, learn how to install and start using the Bootstrap module for your Drupal 8 website.

• Install and Enable Bootstrap Theme

The first step is to download the Bootstrap framework. You can download the modules from the Drupal module project library.

Once downloaded, upload it to admin/theme/install. Then navigate into admin/appearance. Here, you’ll now see Bootstrap listed. Set it to default.

• Configure Theme Settings

The next step is to configure theme settings for Bootstrap in D8 Admin. So follow this path admin/appearance/settings/bootstrap and start reviewing the default settings. Review the settings for button, tables, images, and others.

Also review the CDN settings. By default, it will be set to jsDelivr. But if you want to deliver the files locally, then set it to “none”.

• Create a Drupal Sub-theme

In the next step, you need to create a sub-theme that will be used for applying CSS changes or adding custom templates while preserving compatibility with future Bootstrap versions.

For the sub-theme, you’ll have three options, which are:
Once you’ve chosen the one to proceed with, copy the files from the “themes/bootstrap/starterkits” directory. Then create a folder and paste them there. This is your sub-theme folder. Provide a name for the folder of your choice.

If you want to edit the sub-theme files, you need to locate the following files in the sub-directory:
You have to replace THEMENAME with the name of the folder you just created.

Then, open the files and replace THEMENAME with the name of the sub-theme folder. If you want, you can also change the name, description, and values present in the subtheme variables.

Then, make changes the name of the following:
Once you’re done replacing the variables in the sub-theme package, go to “admin/appearance” and make the sub-theme folder as default.

Install Bootstrap Layouts Module

The next step is to install Bootstrap Layouts module. It can improve the template selection in Drupal.

You can download it from Drupal Module library. Once downloaded, navigate into admin/structure/types/manage/*/display. Here, you can select the layout for the content types. Select “Bootstrap” and one of the display options from the menu.

For configuring Bootstrap Templates module, follow these steps:

• Navigate to display configuration page for a particular content type
• In the layout settings, select “Three colum stacked”
• Then open the modules/bootstrap_layouts/bs-3col-stacked folder
• Find the template file that’s created by the module and download it
• Copy the bs-3col-stacked to the sub-theme folder to override it
• Make necessary changes to the template file to create a custom design

By using the Bootstrap Templates module, you can ask your developers to create custom templates.

• Add CSS Shortcodes for Custom Page Styles

In the last step, you need to add CSS Shortcodes to your custom template files to add certain elements like buttons, breadcrumbs, forms, and navbars along with styling.

For container element, add this code:

Or

For Jumbotron, add:

For buttons, add:

For labels, add:

For badges, add:

Similarly, find shortcodes for other elements and add to your files wherever necessary.

So that’s how you can use Bootstrap along with your Drupal 8 website. For more assistance, contact the hosting support team.