How to Install & Use Twitter Bootstrap as a Drupal 8 Theme

Introduction: The Twitter Bootstrap Theme for Drupal 8

This Tutorial will guide new users to install & use Twitter Bootstrap as a theme for Drupal 8 websites, including shortcodes for CSS in templates for breadcrumbs, navbars, & tooltips.

The Bootstrap module for Drupal 8 implements the Bootstrap 3 framework for the CMS using jsDelivr CDN for the required files or local hosting of the code in the sites/*/themes directory.

The Twitter Bootstrap theme for Drupal 8 includes custom CSS shortcodes for styling buttons, tables, labels, badges, drop-down menus, navbars, alerts, panels, wells, & an image carousel.

Step One: Download, Install, & Enable the Bootstrap Theme

Start: On a Drupal 8 website, navigate to admin/theme/install and upload the theme files for Drupal Bootstrap. The zip file for the installation can be downloaded here:

Next: Navigate to admin/appearance and set the Bootstrap theme as default.

Finish: Save the new configuration and click the “Settings” link to access advanced options.

Step Two: Configure the Theme Settings in D8 Admin

Start: Navigate to admin/appearance/settings/bootstrap and review the default settings for the Twitter Bootstrap theme. Change the logo image by uploading a new file & save the settings.

Next: Review the CDN settings for the Twitter Bootstrap 3.0 JavaScript files required by the theme. The default value is jsDelivr. Choose “None” if you prefer to host the files locally.

Finish: Review the theme settings for buttons, images, tables, & other components to choose style selections that match your interests, i.e. “Use rounded corners on images” with JavaScript.

Step Three: Create a Drupal Sub-Theme for CSS Changes.

Start: When making CSS changes to Drupal 8 theme files or adding new custom templates, make a sub-theme for Twitter Bootstrap in order to preserve upgrade compatibility.

Next: The Twitter Bootstrap theme gives 3 Starterkit choices for a sub-theme:

 

  • CDN Starterkit
  • Less Starterkit
  • Sass Starterkit

 

Next: Choose one and then copy the files from the themes/bootstrap/starterkits directory into a new folder with your choice of theme name, i.e. “mytheme”.

Configuration: Editing the Sub-Theme Files:

Next: Locate the following files in your sub-theme directory:

 

  • ./THEMENAME/THEMENAME.info.yml.
  • ./THEMENAME/THEMENAME.starterkit.yml
  • ./THEMENAME/THEMENAME.libraries.yml
  • ./THEMENAME/THEMENAME.theme.
  • ./THEMENAME/config/install/THEMENAME.settings.yml
  • ./THEMENAME/config/schema/THEMENAME.schema.yml

 

Configuration: Change the THEMENAME value in each file title to the value of your theme, i.e. the theme name used in the sub-theme directory copied to the server.

Next: Open the sub-theme files listed above individually in a code editor and change the any variables where THEMENAME is used to reflect your own sub-theme (i.e., “mytheme”).

Hint: You can also change the name, description and any other values in the subtheme variables within each .yml file to customize them for display in Drupal 8 admin pages.

Configuration: Change the name on the library extension: THEMENAME/framework

Configuration: Change the name on the sub-theme configuration: /THEMENAME/config/schema/THEMENAME.schema.yml

Configuration: Change the name on THEMENAME.settings and 'THEMETITLE settings' to match your custom theme variable. i.e. “mytheme.settings”.

Hint: If the new subtheme directory is named "mytheme" then all of the variables above would be replaced with mytheme in the instances where THEMENAME is found.

  • Example: /mytheme/mytheme.info.yml

Finish: When all of the variables are changed in the sub-theme package, navigate to admin/appearance and set the new sub-theme as default.

Step Four: Install the Bootstrap Layouts Module

Start: Further Drupal 8 development with the Bootstrap theme & sub-theme package can include custom CSS on pages, blocks, & views, as well as custom sub-theme template files.

Hint: Install the Bootstrap Layouts module for improved template selection in Drupal 8.

Next: Navigate to admin/structure/types/manage/*/display & choose a layout for each content type in the default view. Choose “Bootstrap” & one of the display options given in the menu.

Example Configuration - Bootstrap Templates Module:

  • Navigate to the display configuration page for a content type.
  • Choose "Three column stacked" in the layout settings.
  • Navigate to the modules/bootstrap_layouts/bs-3col-stacked folder.
  • Access the template file generated by the module & download.
  • Copy the bs-3col-stacked to the sub-theme folder to override.
  • Modify the template file in a desktop code editor for a custom design.

Finish: Using the Bootstrap Templates module, Drupal 8 web developers can create custom templates to use with CMS website pages that incorporate CSS & HTML code with JavaScript.

Step Five: Use CSS Shortcodes for Custom Page Styles

Start: Use Twitter Bootstrap 3.0 CSS shortcodes in custom template files to add container elements, breadcrumbs, buttons, forms, menus, navbars, & other components with styling.

CSS Shortcode - Twitter Bootstrap 3.0

Container Elements:

<div class="container">
  <!-- Content here -->
</div>

or

<div class="container-fluid">
  <!-- Content here -->
</div>

Jumbotron:

<div class="jumbotron">
        <h1>Headline Text - Large Type</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

Buttons:

<p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
</p>

Labels:

<p>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
</p>

Badges:

<p>
       <a href="#">My Profile <span class="badge">42</span></a>
     </p>

Thumbnails:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Responsive Breakpoints:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Finish: Developers can find more CSS shortcodes on the Twitter Bootstrap 3.0 site:

Conclusion: Professional Style for Web/Mobile Applications.

Working with the Twitter Bootstrap theme for Drupal 8, web developers can use sub-themes, custom templates, & CSS short-codes to speed-up web & mobile   application development.

Summary: The Bootstrap theme for Drupal 8 provides a full implementation of the Twitter Bootstrap 3.0 JavaScript & CSS for building pro websites that scale with CDN support.

Web publishers will need to build custom solutions using a sub-theme & the Bootstrap Layouts module to make the most advantage of all the available Twitter Bootstrap 3.0 display options.

Check out these top 3 Drupal hosting services:

Was this article helpful?