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

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:

<li”>Link: https://getbootstrap.com/docs/3.3/css/

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:

Kamatera
$4.00 /mo
Starting price
Visit Kamatera
Rating based on expert review
  • User Friendly
    3.5
  • Support
    3.0
  • Features
    3.9
  • Reliability
    4.0
  • Pricing
    4.3
Hostinger
$2.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
Ultahost
$2.90 /mo
Starting price
Visit Ultahost
Rating based on expert review
  • User Friendly
    4.3
  • Support
    4.8
  • Features
    4.5
  • Reliability
    4.0
  • Pricing
    4.8
  • Want to get top recommendations about best hosting? Just click this link!

How to Create a Landing Page for Drupal 8 Using Display Suite

This Tutorial will show how to Install & Use the Display Suite module with Drupa
3 min read
Jeffrey Scott
Jeffrey Scott
Hosting Expert

How to Create a Landing Page for Drupal 8 Using Theme Regions

This Tutorial will show how to use Drupal 8 Theme Regions with Menus, Blocks, &
3 min read
Jeffrey Scott
Jeffrey Scott
Hosting Expert

How to Create a Landing Page for Drupal Using Panels?

In this tutorial, we will build a Panels landing page for Drupal 8 with Views Bl
5 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert

How To Create an AngularJS App

AngularJS is a JavaScript based open-source front-end web application framework
4 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top