Bootstrap Barrio SubTheme

A custom Drupal sub-theme based on the Bootstrap Barrio base theme, providing a Bootstrap-powered responsive design framework for your Drupal site.

Description

This sub-theme extends the Bootstrap Barrio theme, allowing for customized styling and functionality while maintaining the flexibility and power of Bootstrap's responsive grid system and components.

Requirements

• Drupal 10.x, 11.x
• Bootstrap Barrio base theme (8.x-5.x or later)
• Bootstrap 5.x (included via CDN or locally)

Installation

Step 1: Install Bootstrap Barrio Base Theme

Download and install the Bootstrap Barrio base theme if you haven't already:

composer require drupal/bootstrap_barrio

Or download it manually from Drupal.org.

Step 2: Install This Sub-Theme

1. Clone or download this repository into your Drupal themes directory:

   cd web/themes/custom
   git clone [your-repository-url] bootstrap_barrio_subtheme

2. Clear Drupal cache:

   drush cr

3. Enable the sub-theme via Drush:

   drush theme:enable bootstrap_barrio_subtheme
   drush config:set system.theme default bootstrap_barrio_subtheme

   Or enable it through the Drupal admin interface at: Administration > Appearance

Configuration

Theme Settings

Navigate to Administration > Appearance > Settings > Bootstrap Barrio SubTheme to configure:

• Bootstrap version (CDN or local files)
• Layout settings and container widths
• Navigation styles
• Button styles and sizes
• Color schemes
• And more Bootstrap-specific options

Customizing Bootstrap Variables

To customize Bootstrap variables:

1. Navigate to scss/variables/_bootstrap-variables.scss
2. Override any Bootstrap variable (colors, spacing, breakpoints, etc.)
3. Compile the SCSS files (see Development section below)

Example customizations:

$primary: #0066cc;
$secondary: #6c757d;
$font-family-base: 'Helvetica Neue', Arial, sans-serif;

File Structure

bootstrap_barrio_subtheme/
├── config/
│   ├── install/
│   └── schema/
├── css/
│   └── style.css                 # Compiled CSS
├── images/
├── js/
│   └── custom.js                 # Custom JavaScript
├── scss/
│   ├── components/               # Component-specific styles
│   ├── layout/                   # Layout styles
│   ├── variables/
│   │   └── _bootstrap-variables.scss
│   └── style.scss                # Main SCSS file
├── templates/                    # Twig template overrides
│   ├── block/
│   ├── field/
│   ├── node/
│   ├── page/
│   └── views/
├── bootstrap_barrio_subtheme.info.yml
├── bootstrap_barrio_subtheme.libraries.yml
├── bootstrap_barrio_subtheme.theme
├── logo.svg
├── package.json
├── screenshot.png
└── README.md

Development

Prerequisites

• Node.js and npm
• Sass compiler

Setup Development Environment

1. Install dependencies:

   npm install

2. Compile SCSS to CSS:

   npm run build

3. Watch for changes during development:

   npm run watch

Compiling SCSS

If you haven't set up npm scripts, you can compile manually:

sass scss/style.scss css/style.css

Or with watch mode:

sass --watch scss/style.scss:css/style.css

Adding Custom Styles

1. Create component files in scss/components/
2. Import them in scss/style.scss
3. Run the build command to compile

Example:

// scss/components/_custom-header.scss
.custom-header {
  background-color: $primary;
  padding: 2rem 0;
}

Then import in scss/style.scss:

@import 'components/custom-header';

Template Overrides

Template files go in the templates/ directory, organized by template type. Copy templates from the base theme or core and modify as needed.

Example: To override the page template:

1. Copy page.html.twig from Bootstrap Barrio or core
2. Place it in templates/page/
3. Modify as needed
4. Clear cache

JavaScript

Custom JavaScript should be added to js/custom.js and is automatically loaded via the theme's library definition in bootstrap_barrio_subtheme.libraries.yml.

Theming Best Practices

• Always use Bootstrap classes when possible for consistency
• Keep custom CSS organized in component files
• Use Drupal's render arrays and theme suggestions
• Test responsive behavior at all breakpoints
• Document any custom functionality in this README

Troubleshooting

Styles Not Updating

1. Clear Drupal cache: drush cr
2. Rebuild SCSS: npm run build
3. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)

Bootstrap Components Not Working

Ensure Bootstrap JavaScript is properly loaded. Check theme settings to verify the Bootstrap library source (CDN or local) is configured correctly.

Template Changes Not Appearing

1. Clear Drupal cache: drush cr
2. Check that templates are in the correct directory
3. Verify template suggestions using Twig debugging

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -am 'Add new feature'
4. Push to the branch: git push origin feature/my-feature
5. Submit a pull request

Resources

• Bootstrap Barrio Documentation
• Bootstrap 5 Documentation
• Drupal Theming Guide
• Twig Documentation

License

This project is licensed under the GPL-2.0+ License - see the LICENSE file for details.

Credits

• Base theme: Bootstrap Barrio
• Framework: Bootstrap

Support

For issues, questions, or contributions, please use the project's issue queue or contact the maintainers.

---

Version: 1.0.0
Last Updated: October 2025