Barrio

Drupal 8 - Bootstrap 4 (Bootstrap 3 compatible)

Barrio was completely rewrite as a Drupal 8 Base Theme.

It is based on Bootstrap 4 (alpha6), using from roots twig templates to override Drupal markup.

This theme has no style rather than layout to serve as a start Base Theme.

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.

Bootstrap Libraries loading relies on 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.

Features

• 1, 2 and 3 column automatic layouts
• Flexible column widths
• 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
• Predefined Google Fonts combinations

Installation

• Download and install Bootstrap Library module.
• 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.

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.

Following modules and themes are requiered:

• jQuery Update - 7.x-2.3 or higher. Bootstrap requires a minimum jQuery version of 1.7 or higher. You must manually set this in the configuration after it is installed.
• Bootstrap Theme
• Skinr

Following modules are recommended:

• DHTML Menu. Works like charm with Twitter Bootstrap menus.
• Display Suite. Allows personalization of any field, making it easy to convert to Bootstrap markup. Three basic Bootstrap layouts are available on Display Suite: Thumbnails, Panels and Media

Installation

1. Unpack and upload Bootstrap Theme in sites/all/themes. Installing in default will drop errors.
2. Unpack and upload Bootstrap Barrio within your default's themes folder (usually sites/default/themes).
3. Download Twitter Bootstrap Library and install on sites/all/libraries/bootstrap and enable with Bootstrap Library Module or just configure CDN loading on theme's administrator.
4. Download and enable the Skinr module, set permissions if you're not uid 1
5. Configure jQuery update to version 1.7, version 1.8 have weird behaivour on views.

One Page / Parallax

From version 7.x-3.5 there is an aditional option that allows to show fron page as One Page, side bars are disabled and all regions will have full width backgrounds.

For a complete configuration you will want to use the following modules:

• Void menu, will let set menu items pointing to anchors on the same page.
• Parallax background, will add parallax effects to your One Page regions.
• Scroll Reveal, nice effects when element enters viewport.

IE8 compatibility

See: IE8 Drupal Bootstrap Compatibility

Mantainers of this theme:

• Hatuhay

Sponsored by:

• Development Factory Group