FlexiStyle Bootstrap is based on the FlexiStyle Drupal theme. This theme is fully compatible 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).

FlexiStyle Base theme without bootstrap

✔ Live Demo Steps

Click on the Live Demo button.
Type "flexistyle_bootstrap" in the Evaluate Drupal projects field.
Then choose the Drupal version from the select list.
Then click on the Launch Sandbox.
After a few minutes, the project sandbox is ready for testing.

Live Demo

✔ Installation

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

✔ Create subtheme

You can create a subtheme through a shell script.
Install the "FlexiStyle Bootstrap" theme with the composer composer require 'drupal/flexistyle_bootstrap' but don't enable it.
Go to the theme folder from the shell or command prompt: cd web/themes/contrib/flexistyle_bootstrap.
Run this command from the shell "Make script executable": chmod +x script/subtheme.sh.
Run this command from the shell to launch the script: sh script/subtheme.sh or ./script/subtheme.sh.
That script will ask the questions for you to create your subtheme.
- The machine name of your custom theme? [e.g. mytheme_flexistyle_bootstrap]: mytheme_flexistyle_bootstrap.
- The theme name of your custom theme? [e.g. Mytheme FlexiStyle Bootstrap]: Mytheme FlexiStyle Bootstrap
Go to the administration -> Appearance and enable the `Mytheme FlexiStyle Bootstrap`.

✔ Download Recommended Libraries

Method 1:

Go to the theme folder from the shell or command prompt: cd web/themes/contrib/flexistyle_bootstrap.
Run this command from the shell "Make script executable":
chmod +x script/library.sh.
Run this command from the shell to launch the script: ./script/library.sh.
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]?
Press enter within a few seconds Download will be completed.
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

Maintainers of this theme

Anoop Singh

FlexiStyle Bootstrap

Issues