Bootstrap Library
Provides Bootstrap CSS framework integration for Drupal sites by registering Bootstrap as a library that can be loaded from local files or CDN.
bootstrap_library
Install
composer require 'drupal/bootstrap_library:^2.0'
Overview
Bootstrap Library is a module that integrates the popular Bootstrap CSS framework into Drupal sites. It allows site builders to easily add Bootstrap's responsive grid system, components, and JavaScript plugins to their Drupal themes without needing to manually configure library definitions.
The module provides flexible loading options: you can choose to load Bootstrap from a Content Delivery Network (CDN) with support for multiple Bootstrap versions (from 2.x to 5.x), or from locally installed files. For local installations, you can choose between development (source) files for debugging or minified files for production, as well as Composer-installed packages.
Additionally, the module offers granular visibility controls allowing you to enable or disable Bootstrap loading on specific themes or URL paths. This is particularly useful when Bootstrap should only be loaded on the frontend but not in admin areas, or when using themes that already include Bootstrap.
Features
- Load Bootstrap CSS and JavaScript framework from local files or CDN
- Support for multiple Bootstrap versions including 2.x, 3.x, 4.x, and 5.x series
- Choose between minified (production), source (development), or Composer-installed library variants
- Theme-based visibility control to load Bootstrap only on specific themes
- URL path-based visibility control to exclude or include specific pages
- Option to selectively load only CSS or only JavaScript files
- Dynamically disable Bootstrap via URL parameter (?bootstrap=no)
Use Cases
Adding Bootstrap to a custom theme
If you have a custom Drupal theme that doesn't include Bootstrap, you can use this module to add Bootstrap functionality. Install the module, download Bootstrap to /libraries/bootstrap, and configure the module to load on your custom theme only. This gives you access to Bootstrap's grid system, components, and JavaScript plugins.
Loading Bootstrap from CDN for performance
For sites that want to leverage CDN caching benefits, configure the module to load Bootstrap from a CDN. Select your preferred Bootstrap version from the dropdown, and the module will automatically load the CSS and JavaScript from the appropriate CDN (jsDelivr for Bootstrap 5.x, StackPath for Bootstrap 4.x, or MaxCDN for Bootstrap 3.x and 2.x).
Excluding Bootstrap from admin pages
When using an admin theme that has its own styling (like Claro or Gin), you may want to exclude Bootstrap from admin pages to avoid conflicts. Use the URL visibility settings to exclude paths like 'admin*', 'node/add/*', and 'node/*/edit' from Bootstrap loading. The default configuration already includes these exclusions.
Theme-specific Bootstrap loading
On a site with multiple themes (e.g., different themes for different sections), configure Bootstrap to load only on specific themes. Use the theme visibility setting to specify exactly which themes should have Bootstrap attached, preventing conflicts with themes that include their own version of Bootstrap.
Development and debugging
During development, switch to the non-minified (source) version of Bootstrap files for easier debugging. The uncompressed files make it easier to trace issues in browser developer tools. Switch back to minified files for production.
Tips
- Use the URL parameter ?bootstrap=no to temporarily disable Bootstrap on any page for debugging
- The module depends on jQuery (core/jquery) which is automatically loaded with the Bootstrap library
- For Bootstrap 5.x via CDN, the module also loads the Popper.js library required for dropdowns and tooltips
- When using Composer installation method, ensure twbs/bootstrap package is installed via composer require twbs/bootstrap
- The default configuration excludes common admin and AJAX paths from Bootstrap loading to prevent conflicts
Technical Details
Admin Pages 1
/admin/config/development/bootstrap_library
Configure how Bootstrap framework is loaded on your site, including the source (CDN or local), version, and visibility settings for themes and URL paths.
Hooks 2
hook_page_attachments
Attaches Bootstrap CSS and JavaScript libraries to pages based on configuration settings. Checks theme and URL visibility rules before attaching.
hook_library_info_build
Dynamically builds the bootstrap-cdn library definition based on the selected CDN version in configuration.
Troubleshooting 5
Verify the Bootstrap files are correctly installed in /libraries/bootstrap directory. Check that the module's theme and URL visibility settings are not excluding your current theme or page. Clear the Drupal cache after making configuration changes.
Go to the Bootstrap Library configuration page and ensure admin paths are listed in the URL visibility section with 'All pages except those listed' selected. Default exclusions include admin*, node/add/*, and node/*/edit.
Verify your server can access external CDN URLs. Check for Content Security Policy (CSP) headers that might block external resources. Consider switching to local loading if CDN is blocked.
Use the theme visibility settings to exclude the Bootstrap-based theme from the module's loading. Select 'All themes except those listed' and add the Bootstrap theme to the list.
Append ?bootstrap=no to any URL to temporarily disable Bootstrap loading on that page. This is useful for debugging style conflicts.