Drupal and Bootstrap

Bootstrap 3

With all previous large scale Drupal projects, we have used Bootstrap 3. It has worked well as an all round solid framework with a good structure for handling mobile and desktop styling. The grid system is the most useful and helpful thing about it, saving us time and brain power for things that matter more for the particularities of the site design.

However, there are some downfalls to using Bootstrap's framework out of the box:

• Tied down to some of the styles of buttons, form controls etc due to the complexity of the SCSS/LESS
• Some of the grid system becomes a hindrance to things like equal height columns and things can get a bit mixed up with other approaches.
• It can become something that you "just use" rather than understand.

There is also the idea that being a distributed theme (Bootstrap 3), it is considered a contrib module. This means that the core code should technically not be modified as with updates, those changes will all be lost. Which means anything custom needs to override or go on top of the contrib theme, and this can get messy. The theme also provides hook and theme alters to tailor for some of the markup requirements and classes in order to keep the theme in tact. The theme being pure bootstrap. Rarely do you see the benefits of these without having a good understanding of the way Drupal renders things in conjunction with the way it may impede or interfere with the expectations for the relationship between Bootstrap's markup and its styling.

A lot of the problems faced when theming some of Drupals strange markup can be handled independently of bootstrap and sometimes is despite the fact that Bootstrap may provide some help or half of it. Drupal wasn't developed alongside Bootstrap. A lot of the work Bootstrap 3's theme does gets ignored or goes by unused or unnoticed. In many ways it is almost a theme which is just used to quickly theme up a site, without doing any CSS, why use it at all if we have a specific design? The best example of a Drupal website that uses and makes good use of the theme is the documentation site itself.

Nevertheless, the positives generally outweigh the negatives:

• A lot of time saved if you don't have it, to create a grid system specific for your site.
• The theme typically uses best practices and has knowledgeable developers involved in improving certain aspects to it.
• It can provide you with useful info on some of the way Drupal's theme layer works and how hooks and alters are used (though the ones used in the contribs theme are often not needed).

Bootstrap 4

In recent months, Bootstrap has now been updated to version 4 - where quite a bit has changed. The main differences are:

• Moved to using Sass by default.
• Bigger fonts and headings.
• No glyphicons :)
• Underlying architecture now uses rem and em rather than px, and grid system uses flexbox - which is good for equal height columns.
• The use of flexbox has been used and rewritten with several components; modals, list groups, navs.
• More grid breakpoint and bumped up sizes (.col-md-6 in v3 is now .col-lg-6 in v4).
• Instead of .col-xs-6, it’s now just .col-6
• You can specify specific gutter widths at each breakpoint.
• Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpoints and $container-max-widths).
• Mixins for media queries, so instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.
• Simpler classes and more to tailor for larger screens.
• "Cards" replace Wells and panels and are nicely customizable. They are light and the markup is simple.
• Navbar has changed significantly - classes simplified and improved responsiveness choices
• Forms have been revisited, mores specificity to how the forms are control, size, containers etc.
• JS now uses ES6, doesn't really affect anything too much because we wouldn't touch the source code here.
• The Affix jQuery plugin has been dropped.
• Nearly all components have been refactored to use more un-nested class selectors instead of over-specific children selectors.
• Support for IE8 and IE9 has been dropped.
• ~30% lighter

In the Drupal community, what sites have been built with Bootstrap 4, if any? I can't find any.

As you can see the list above is quite long and it is, without thinking about Drupal, quite a big change. So whether or not to use it with Drupal is kinda scary.

What does the Drupal Bootstrap Theme give us that we would need to replicate in a Bootstrap 4 project?

It gives a lot of integration with how Drupal works and renders things like form and sidebars, and nav tabs etc, via hooks and alters using Drupals API.

At the moment, Bootstrap 4 in a Drupal project would be essentially a completely custom and "on the top" theme. All the things that the Drupal Bootstrap project (https://drupal-bootstrap.org/api/bootstrap) provides would have to be done independently using newly written code for this, which you would do using many other themes such as classy.

This means that a developers cognitive strain would be increased for two reasons: 1) learn Bootstrap 4 and 2) write your own hooks and alters to modify markup etc.

So, should you use Bootstrap 4 for a new Drupal project?

Yes if:

• You want a change from Bootstrap 3 and are fond of all the changes above, at the cost of no Drupal integration.
• You are willing to learn Bootstrap 4 and implement/integrate it with Drupal.

No if:

• You find the hooks and alters extremely useful that the current Bootstrap Drupal project provides.
• You don't have enough time to learn Bootstrap 4 properly.

Summary

• Using Bootstrap for Drupal projects is a good idea but beware of the constraints 
• There's a big enough jump between v3 and v4 that it'll require some learning time before diving in headfirst