Guide to Profitable Sales
Bootstrap Theme
The Bootstrap framework is a highly capable website front-end toolkit. It is responsive so your website will look good on a computer, a tablet, a phone, etc. It is also well integrated with CSS via a call from the ‘head’ and with JavaScipt (JS) from a similar script call. The Flexbox capability allows the creative use of a grid style which provides interesting layout throughout your web pages; though do leverage Semantic Design principles as you manage your design deployment. Another great factor that draws one to Bootstrap is its inclusion of many prebuilt components.
Bootstrap Barrio
Bootstrap is so commonly used with Drupal that tens of thousands of site report using it via the Bootstrap Barrio theme. What this offers over the basic Bootstrap is that someone has written loads of TWIG templates to jumpstart your own site. Think of this as having things like off the shelf components for stuff like cards already available to use directly in Drupal. Since Barrio is built upon Bootstrap you can also go native if you need something beyond what has been pre-built. It is so good that you many major government agencies use it and this video on how one adopted it will convince you to head this way; and if you want to see the result from the state of North Carolina.
Another thing that makes Bootstrap Barrio’s popularity an advantage is there are good videos on how to install and use it; don’t be thrown off that the Bootstrap version has been updated since this video as all that is covered is still accurate. You also have probably heard about Drupal’s own ‘Layout Builder’ module that offers some nice drag and drop site building support. The good news is that Layout Builder and Bootstrap can play nice together as demonstrated in this video on using Bootstrap’s card component in it.
Install Bootstrap Barrio
Bootstrap Barrio installation has enough features and options plus frequent updates you should start by reading the modules’ specific instructions on the Drupal.org site. Once you have that in place you will want to create your custom subtheme to run under it and a super simple overview of installing a Bootstrap Barrio subtheme via a script makes is easy. While all for the ‘super simple’ for many things in life, sometimes seeing something done the old fashion manual way can provide better context for understanding how things work together; NOTE: this video shows doing this with an older version of Bootstrap but the process is the same with the newer versions.
Barrio w/SASS
Not using containers
If you are using a classic server installation or what we might call ‘installing on metal’, you can follow this process that outlines the Bootstrap Barrio theme installation including the SASS option and creating your own custom subtheme from it. Please use your Integrated Development Environment to move around into the correct sub-directories to run the various commands rather than some of the command line syntax shown in that tutorial in a rather confusing way. Other than that the Ostraining overview is excellent.
Using Containers
ARMTEC, Inc. is a huge fan of the advantages of using the CI/CD Workflow approach. In brief, what is outlined in it is the use of local and matched host containers with coordiated Git and a Git Repository workflow DevOps.
What is outlined in the container approach is the further enhancement of fresh environment builds using both package and version control principles. Remember that our workflow is maintaining separate but linked environments for ‘local’ development, that is exchanging with a matched ‘develop’ hosted environment via Git Stage/Commit/Sync, the host also having our ‘staged’ environment where we conduct testing before merging to the ‘main’ production website environment. This is providing important version control. However, we also set up a .gitignore file so we didn’t have to pass everything between the environments; rather we pass definition or recipe files like Composer.json that points to what things are needed. Composer is the ‘package manager for ‘php’ applications but using SASS will require we also have the npm package manager for JavaScript installed in the container to run Node JS and something called ‘Gulp’ to compile SASS into CSS.
Using the Bootstrap Barrio option which uses SASS compiling sounds like more work during set up. However the dividends are huge. Things like the Barrio Starter Kit put you in a position to do much more highly coordinated CSS theme finalization with libraries of reusable definitions. You will like it during development, you will LOVE it if you have to make any changes that touch multiple parts of a complex website.
All this means is that you need to figure out how to install the required tools noted in the theme documentation into your local container; in our case into Lando. Without getting into super detail about the inner workings of containers, it means you need to specify some ‘services’ and some ‘tooling’ first; then to the install procedure. Remember that as you manage whatever workflow you use that you should set up the logic so that you do your SASS Compile step locally and that what gets pushed up to the host when you merge in your development changes would be just the resulting files (e.g. like the CSS files, etc.). Do make that somewhat fool proof, you might set up your .gitignore to exclude the other files from going to the repository since all the host needs to run your website are the post-compile results.
Extras/modules
If you decide to use the Bootstrap theme (or it’s Barrio deployment) you may want to at the following contributed modules to enhance its utility even further.
Bootstrap Layouts
Not to be confused with Bootstrap Layout Builder, discussed shortly, this module basically gives you a bunch of pre-built layouts. Once you have it installed, when you go into one of the Content Types you see the typical Operations option menu choices of managing fields, form, or display. Under the display choice you use to see a pretty limited default list and now you see a whole bunch of additional basic layouts to select from. This can be a jumpstart improvement which can be used with your other front-end tools, even Display Suite or Panels.
Views Bootstrap
This module has unique install instructions depending on the version of Bootstrap you are using in theming. Views is one of the most powerful features of Drupal so having bootstrap features integrated with it is great. Go to the Drupal.org site for the right version install instructions to match your Bootstrap and Drupal versions.
composer require drupal/views_bootstrap
drush en views_bootstrap
Bootstrap Layout Builder
First try using native Layout Builder after you have Bootstrap installed and set as default. Then consider adding this views bootstrap module to get some potential additional functionality around accordion, carousel, etc. Bootstrap Layout Builder uses different configuration settings for the grid layout choices, gutters, container widths, etc. You can jump start the utility of its combination with Bootstrap by using this module. See how using the GUI interface in modern Drupal to do much of your front-end work, is enhanced by using this module with the Bootstrap theme.
composer require drupal/bootstrap_layout_builder
drush en bootstrap_layout_builder
Block Styles
The Block Styles Module adds a styles selector at the end of the block configuration form. Included styles support Bootstrap Styles on submodule for (modal, Dropdown, card, and collapse). The assumption is that a dependency on the Styles API will install it at the same time.
composer require drupal/block_styles
drush en block_styles
Bootstrap Styles
This underlies the Bootstrap Layout Builder’s styles plugins.
composer require drupal/bootstrap_styles
drush en bootstrap_styles
Bootstrap Layout Builder Library
This is key to saving reusable layout sections and whole templates within Bootstrap Layout builder’s GUI interface so you can speed development by grabbing stuff from a library you build up specific to your site. Learn more about how this library add-on module allows for sharing templates and discussion of establishing a repository of templates you might benefit from others work efforts.
composer require drupal/section_library
drush en section_library
Bootstrap external link
This module provides a Pop up Modal warning of an external link leaving site.
composer require drupal/bootstrap_external_link_popup
drush en bootstrap_external_link_popup
Bootstrap SASS
Bootstrap SASS provides the SASS approach to CSS compiling within Bootstrap. It is typically listed as an option on the Bootstrap Barrio theme overview. Confirm that it isn’t already installed via some sort of a dependency with the basic theme. If you need to add the SASS Start Kit separately it is installed like a normal theme with composer.
composer require drupal/bootstrap_sass
drush en bootstrap_sass
Bootstrap Local
You probably don’t need this module. Normally the ‘head’ of your website pages will tell the page to look for the bootstrap library on the web. There are times when having that bootstrap library locally can be useful. For example, if you have an existing theme on your site and are replacing it with bootstrap you may prefer to do all your work locally; say in a Lando or other local Docker container instance of your website and put it through your normal CI/CD workflow (e.g. GitOps). If you want to load the bootstrap library locally you use this module; otherwise you set up the CDN approach.
composer require drupal/bootstrap_library
drush en bootstrap_library
Radix Bootstrap
Not for the faint of heart. However, if you are a confident front-end developer who likes wide open control and are not afraid of compiling, you might take a look at Bootstrap deployment with Radix. Be fore warned, you need to also get your region sections into the overall page layouts and you need to have some potential comfort with TWIG. If this is you, get started here to see how it is done.