flexistyle_bootstrap

FlexiStyle Bootstrap is a versatile Drupal base theme designed to be fully compatible with Drupal 10. FlexiStyle Bootstrap serves as a robust foundation for creating sub-themes, making it easy to build custom designs while maintaining full compatibility with Drupal 10. It is a dynamic and modern custom theme designed specifically for Drupal. Its theme completely overwrites standard root twig templates. This theme is based on bootstrap based layout and structure. This theme seamlessly integrates aesthetics with functionality, offering a visually striking and user-friendly.

This theme supports all the bootstrap versions. It is a lightweight theme because we are attaching all the CSS and JS libraries based on the components and disabling unnecessary libraries. theme performance, best practices, and SEO scores are high in a lighthouse.

The theme is fully responsive and mobile-first. Use the latest version of Fontawesome and Google material libraries for icons in this theme. All the sections, colors, sizes, widths, columns and containers are fully based on the bootstrap.

"Flexi Style Bootstrap" theme settings are manageable, You can change the header, navbar, footer, Bootstrap version, and maintenance mode time settings and styles from the theme appearance. This theme is fully supportable with the Progressive web application (PWA).

Other Drupal base themes

FlexiStyle Bootstrap SCSS FlexiStyle

✔ Live Demo of the Theme

Live Demo

• Click the Live Demo Button: Start by navigating to the live demo portal for evaluating Drupal projects and click on the "Live Demo" button.
• Search for the Theme: In the "Evaluate Drupal projects" field, type flexistyle_bootstrap.
• Select the Drupal Version: From the "Drupal version" select list, choose the desired version (e.g., Drupal 10 or Drupal 11).
• Launch the Sandbox: Click on the "Launch Sandbox" button to initiate the demo environment.
• Wait for the Environment Setup: Within a few minutes, the project sandbox will be ready for testing.

You can now explore and test the features of the FlexiStyle Bootstrap theme in a fully functional sandbox environment!

✔ Installation

1. Download the FlexiStyle Bootstrap theme from drupal.org manually, or by composer composer require 'drupal/flexistyle_bootstrap'.
2. Install the "FlexiStyle Bootstrap" theme.
3. Configure the defined flexistyle_bootstrap theme settings.

✔ Create a Subtheme

Method 1: Creating a Subtheme Manually

• Locate the Subtheme Folder: Navigate to the theme's root folder, where you'll find a subtheme folder web/themes/contrib/flexistyle_bootstrap.
• Copy the Subtheme Folder: Copy the subtheme folder
• Rename the folder to your desired subtheme name (e.g., my_custom_subtheme).
• Update the Info File: Open the flexistyle_bootstrap_subtheme.info.yml file inside your subtheme folder.
  

  name: 'My Custom Subtheme'
  description: 'A custom subtheme of FlexiStyle Bootstrap.'
  base theme: 'flexistyle_bootstrap'
  

• Replace My Custom Subtheme and A custom subtheme of FlexiStyle Bootstrap with your own subtheme's name and description.
• Customize CSS and JS: Add custom CSS files in the css folder to modify styles and Use the js folder to add custom JavaScript files if needed.
• Enable the Subtheme: Go to the Appearance section in your Drupal admin panel.
• Enable and set your subtheme as the default theme.

Method 2: Creating a Subtheme Using a Shell Script

• Navigate to the Theme Directory Move to the theme's directory via the shell or command prompt:
  cd web/themes/contrib/flexistyle_bootstrap
• Make the Script Executable: Make the subtheme creation script executable by running:
  chmod +x script/subtheme.sh
• Launch the Subtheme Script: Execute the script to begin the subtheme creation process:
  ./script/subtheme.sh
• Follow the Script Prompts: The script will prompt you for inputs to set up your subtheme:
  • Machine Name of Your Custom Theme: Enter the machine name for your subtheme, e.g.:
    mytheme_flexistyle_bootstrap
  • Theme Name of Your Custom Theme: Enter the human-readable name for your subtheme, e.g.:
    Mytheme FlexiStyle Bootstrap
• Enable Your Subtheme: After the script completes, go to your Drupal administration panel: Navigate to Administration → Appearance.
• Find your newly created subtheme (e.g., Mytheme FlexiStyle Bootstrap) and enable it.

Your subtheme is now ready to use. You can further customize it by adding styles, templates, or scripts in the subtheme folder.

✔ Download Recommended Libraries

Method 1:

1. Go to the theme folder from the shell or command prompt: cd web/themes/contrib/flexistyle_bootstrap.
2. Run this command from the shell "Make script executable":
   chmod +x script/library.sh.
3. Run this command from the shell to launch the script: ./script/library.sh.
4. That script will ask the questions.
   • Do you want to move your bootstrap library from vendor to libraries: [Yes]?.
   • Do you want to download popper.js libraries: [Yes]?
5. Press enter within a few seconds Download will be completed.
6. Now you can change your theme settings Bootstrap configuration from local to libraries.

Method 2: Manual

• Download compiled Bootstrap source files and popper.js with your asset.
• Click on Download to latest bootstrap library.
• Create a "libraries" folder if it does not exist in your application on root.
• Now extract the downloaded zip file into the libraries folder on that path web/libraries/bootstrap.
• Rename the extracted folder to bootstrap.
• Click on Save popperjs and save into the web/libraries/popper.js/dist folder, if it does not exist create it.
• Go to the Appearance /admin/appearance.
• From Installed themes Click on "Settings" gear icons.
• From the Bootstrap settings tab > Choose Libraries from the "Bootstrap from" select list.

Download Bootstrap Download popper.js

✔ Features of the theme

The FlexiStyle Bootstrap theme is a highly customizable and versatile Drupal base theme designed for modern web development. Fully compatible with Drupal 10 and 11, this theme offers a wide array of features:

Bootstrap Integration

• Full Flexibility: Choose how to integrate Bootstrap, whether via local files, CDN, or libraries folder.
• Bootstrap Version Selection: Select the desired Bootstrap version from local files or CDN.

Layout Options

• Fixed-Width or Full-Width Layouts
• Use "Container" for a fixed-width layout and Use "Container-fluid" for a full-width layout.

Global Settings

• Fonts: Choose global fonts from local files or Google Fonts for full flexibility.
• Icons: Supports Font Awesome, Google Material Icons, and Bootstrap Icons.
• Global Styles: Add custom CSS for instant changes to your webpage without needing server access.

Header Customization

• Top Header Background: Select from predefined background color options.
• Top Header Classes: Add custom classes for unique header styling.
• Header Position: Easily switch between "Normal" and "Sticky" header positions.
• Header Styles: Three distinct header styles to choose from.
• Navbar Background: Change the header navbar's background color for a better user interface (UI).
• Header Classes: Add custom or Bootstrap classes for advanced header customization.

Sidebar Options

• Background Colors: Change sidebar block backgrounds using predefined colors.
• Sidebar Block Classes: Add Bootstrap or custom classes for personalized sidebar design.

Footer Design

• Background Colors: Customize the footer and footer-bottom backgrounds.
• Footer Classes: Add custom or Bootstrap classes to style the footer.
• Footer Top and Bottom Classes: Differentiate sections of the footer with unique classes.

Theme Structure and Development Features

• Complete Bootstrap Class Library: Utilize all Bootstrap classes to build page layouts and structures.
• Customizable Twig Templates: Easily modify Twig files for template customization.
• Pre-Designed Core Pages: Save time with pre-designed core pages.
• Subtheme Folder: Includes a ready-to-use subtheme folder for creating custom themes manually.
• Components-Based: Fully components-based architecture for better modularity and reusability.

Performance and Compatibility

• Lightweight and High-Performance: Optimized for speed and efficiency across all sections.
• Accessibility-Ready: Adheres to accessibility standards for an inclusive user experience.
• Progressive Web App (PWA) Support: Fully compatible with Progressive Web Applications.
• Responsive and Mobile-Friendly: Adapts seamlessly to various screen sizes and devices.
• Cross-Browser Compatibility: Ensures consistent performance across all modern web browsers.

Maintainer of this theme

• Anoop Singh