Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Barrio is a Bootstrap 4/5, Drupal 8 Base Theme, using from roots twig templates to completely override Drupal's markup, generating full Bootstrap 4/5 markup and wiping out almost all Drupal 8 code from the HTML output.
This theme has no style, rather it creates a layout to serve as a starting point for a Base Theme.
Several configuration options are available for this theme out of the box on its settings form, plus there's unlimited possibilities from editing twig templates..
Basic installation and subthemes
Configuring Bootstrap Barrio using the settings form
Features to improve your subtheme
Bootstrap Barrio, Bootstrap 5 version
Do more on your subtheme with simple code snippets
Barrio is a Drupal - Bootstrap 5 Base Theme. Drupal markup is completely overwrite as standard Bootstrap 5 markup using from roots twig templates referencing only to Bootstrap CSS and little custom CSS. Barrio is Flex based for whatever is not covered by Bootstrap. Use SASS Barrio Drupal Starterkit Subtheme to streamline your development, creating custom compiled Bootstrap styles by just changing a few variables.
Color management using predefined or custom color combinations, declaring CSS variables.
Variables will generate a complete color scheme overriding Bootstrap default color variables.
Variables could also be referenced from custom CSS or SCSS
jQuery is no longer required on Barrio 5.5.*.
If your subtheme requires jQuery ensure that the dependency is declared on your subtheme info file before upgrading to 5.5.7
Docksal Barrio Drupal 9 Boilerplate
This theme has no style rather than layout to serve as a start Base Theme.
Starterkit subtheme is fully integrated with Color Module.
1, 2 or 3 columns are handled automatically with configurable column widths. An extensive easy to use configuration form allows to configure 'Bootstrap Style' tables, buttons, navbars, containers, rows, Google Fonts, icons, messages, menus, etc.
To upgrade from Barrio 8.x-4.x to Barrio 5.1.x, if your theme does not use the Barrio Layouts on Display Suite then you can upgrade your Barrio theme with no harm
If your theme use Barrio Layouts on Display Suite please read before upgrading to Barrio 5.x.
Cards and Media Bootstrap layouts are declared to use them out of the box on Barrio Subthemes.
Bootstrap Cards and Media Quick Tutorial.
Now Barrio comes with optional SVG Bootstrap icons defined for Drupal default menu links, to activate go to Font & Icon settings. New Barrio version also includes automatically generated classes for all menu links.
For awesome block style manipulation use Block Styles Module. With this module any block could be turned into dropdown, modal or collapse with a click. It also let you add classes to blocks allowing padding and margins being handled from configuration.
Barrio 5.x layouts are defined using layout discovery classes, this layouts can be used out of the box with Layout Builder, Display Suite or any other module that consumes layout.
Layouts included:
Almost every Drupal CSS is overriten using Bootstrap variables for sitewide standard colors and spacing. Based on Google Material Design full color scheme is generated including variants for main and secondary colors.
This subtheme is compatible with Bootstrap Material Design.
Want to learn more:
"scripts": {
"post-install-cmd": [
"@composer drupal-scaffold"
],
"post-update-cmd": [
"@composer drupal-scaffold",
+ "mkdir -p web/libraries/bootstrap",
+ "cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap"
],
This will mantain your bootstrap version up to date when updating via composer.
Also, Bootstrap Libraries could be loaded by the Bootstrap Library module, this give you extra flexibility to load the library either via CDN or locally, choosing an up to date Bootstrap version regardless of the theme version.
Top Drupal contributor Acquia would like to thank their partners for their contributions to Drupal.
Drupal is a registered trademark of Dries Buytaert.
