Drupal 8/9 - Bootstrap 4 (Flex based)
Barrio is a Drupal 8/9 - Bootstrap 4 Base Theme. Drupal markup is completely overwrite as standard Bootstrap 4 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.
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, etc.
Cards and Media Bootstrap layouts are declared to use them out of the box on Barrio Subthemes. 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.
Personalize icon usage
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.
✔ SASS
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.
✔ Features
- 1, 2 and 3 column automatic layouts
- Color Module integration
- Flexible column widths
- Classes to identify menu links
- SVG icons integration
- Standard Bootstrap 4 markup
- Column based grid
- Standard markup for header navigation
- Container and container fluid layout
- Bootstrap form elements
- Scroll class on body on window scroll
- Easy to customize twig templates
- Customized Bootstrap themed tables
- Predefined Google Fonts combinations
- Card Column Views template to alllow card column listings
✔ Installation
- Download and install Barrio.
- Define Barrio Settings
- Choose how to load Bootstrap files, CDN or locally
- If load Bootstrap files from CDN, choose version to load on Bootstrap Library settings.
✔ Bootstrap Libraries Load
Since 8.x-4.24 version, Bootstrap is automatically downloaded via composer and copied into vendors folder.
To copy dist files into libraries folder during installation, you can add the following 2 lines of script into your main composer.json file:
"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.
✔ Menu dropdowns
Barrio works with menu dropdowns, but they are handled via Bootstrap dorpdown javascript. To work properly all parent menu link must be set as expanded.
✔ Funding
Barrio es basically a personal effort shared with the community and with a high growth in the last months. Is this them has been usefull to your organization please consider taking advantage of our consulting services or making a donation to support further development.
Drupal 7
Bootstrap Barrio is a sub-theme of the Bootstrap Theme, adding 1, 2 or 3 columns with configurable widths, Skinr manipulation of blocks for easy span width control, Parallax / One Page option for front page, definition of blocks as modals, YAMM megamenu using blocks as sub-menus, full width slider region, device visibility configuration for blocks, fixed 970px width disabling responsiveness.
Drupal 9 is here: the easiest to use, most powerful version yet. Built by the world's best open source community.
