One Year With Bootstrap 4
Bootstrap is a free and open-source front-end framework for creating responsive websites and applications.
As such, it includes various HTML and CSS-based design templates for typography, forms, buttons, navigation, modals, and other components, as well as optional JavaScript and jQuery plug-ins.
First released in 2011 by Mark Otto and Jacob Thornton of Twitter, Bootstrap dubbed itself “[t]he most popular HTML, CSS, and JS library in the world.”
It’s currently utilized by more than 6 million websites and is the second most-starred GitHub project — with more than 129,000 stars!
And it’s not hard to understand why.
Bootstrap makes it easy for just about anyone with a basic knowledge of HTML and CSS to create attractive, responsive, mobile-first websites and applications compatible with all modern browsers.
However, in the seven years since its initial release, Bootstrap’s growth seems to have petered out somewhat.
Though it still dominates the front-end framework market, Bootstrap has faced criticism by several within the web development community for (among other things) its perceived “tight coupling,” opinionated styling, and lack of semantic meaning.
For example, the self-proclaimed “philosopher developer” Dan Tao wrote that:
“What at first seemed like a great set of building blocks eventually starts to morph into a mountain of technical debt. Your HTML is littered with deeply nested structures with Bootstrap-specific attributes.”
Several additional frameworks have since arisen to capitalize on these discontents. And Bootstrap now faces stiff competition from the likes of Google’s Materialize, Zurb’s Foundation, as well as the open-source Semantic UI and Bulma.
In this blog post, I’ll be going over some of the new features of Bootstrap 4 and discussing my experience working with the framework over the past year in order to determine whether Bootstrap still makes sense in 2019.
Bootstrap 4: What is it, and why should I care?
After months of anticipation and scattered bits of cryptic news from Otto and Thornton, Bootstrap 4 alpha was released in August 2015.
The first stable version of Bootstrap 4 was released more than two years later in January 2018.
According to the docs, some of the major features of Bootstrap 4 include:
- An improved grid system based on Flexbox
- SASS (rather than LESS) stylesheets
- No support for IE8, IE9, or iOS 6
- Switched from pixels to rems (or root ems)
- Rewrote almost all components, jQuery plug-ins, and documentation
In addition, Bootstrap 4 also includes ready-made, lightweight versions of the framework, which consist of select portions of Bootstrap to use in your projects.
So alongside the standardbootstrap.scss (which includes the entire framework) you’ll also find bootstrap-grid.scss and bootstrap-reboot.scss.
Let’s examine some of these improvements in detail.
Improved grid system
Grids are one of the most important tools in creating a responsive website layout. They define the basic structure with which you can define the layout of your website consistently and with minimal effort.
One of Bootstrap’s major attractions has been its sophisticated grid system, which allows developers to easily adjust their websites to various viewports. It uses an 1170-pixel, 12-column grid system with sensible breakpoints for layouts and interfaces.
Bootstrap 3 contained four grid classes for columns: col-xs-XX for mobile phones, col-sm-XX for tablets, col-md-XX for desktops, and col-lg-XX for larger desktops.
Bootstrap 4 has enhanced this grid system with another grid class selector for extra-large desktops.
The Bootstrap 4 grid system uses flexbox, a new CSS3 layout method that is supported on nearly all modern web browsers.
SASS
Until now, Bootstrap has utilized LESS as its primary CSS preprocessor. But for this latest release, all style rules have been refactored to SASS — a much more popular tool among front-end developers.
In Bootstrap 3, theming was accomplished largely through LESS variable overrides, custom CSS, and a separete theme stylesheet.
Theming is now accomplished through SASS variables, SASS maps, and custom CSS. There are no more dedicated theme stylesheets.
Also, thanks to the powerful Libsass SASS Compiler, Bootstrap 4 will now compile much more quickly than its predecessors.
Relative CSS Units
Whereas previous versions of Bootstrap have utilized px as the default unit of measurement, Bootstrap 4 uses the relative units em and rem. The intention behind this transition is to easily allow all elements on a web page to scale along with changes in viewport size.
In the _variables.scss file, you can see that the default $font-size-base is set to 1rem, or 16px, which is the default font-size for most browsers. Bootstrap 4 uses this value to set the font-size for the document’s <body>.
This makes it much easier to develop responsive web pages that are able to maintain relative proportionality among different screen sizes.
Bootstrap Cards
These cards can be arranged into groups, decks, or complex Masonry-like columns using thecard-columns utility class
