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:
- Download: https://www.drupal.org/project/bootstrap
Next: Navigate to admin/appearance and set the Bootstrap theme as default.
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.
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.
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:
Want to get top recommendations about best hosting? Just click this link!
