Bootstrap 3 vs. 4: What Changes? Should You Use Bootstrap 4?
At the stage of HTML coding it is always important to have at hand a good tool that will greatly accelerate the development process. It should be flexible, easily customizable and will allow you to easily create mockups. It should allow you to easily create pages that are well displayed on desktops and mobile devices. Well, we were lucky, because we have Bootstrap. But only at the moment there are 2 current versions - Bootstrap 3 and Bootstrap 4. What is the difference and which version to use? This we now find out.
Both versions are a powerful CSS frameworks to use for creating adaptive pages that includes:
- multiple-column adaptive grid;
- ready-made elements by type of navigation, buttons, dropdowns, etc;
-set of service classes for controlling the behavior of elements;
-reset or normalize;
-set up the typography in the template;
-Some JS-plugins (Carousel, Modal and so on);
-and much more.
But, despite the almost identical set of components and utilities, there are a lot of differences.
The first thing that catches your eye is that the source code for Bootstrap 4 uses Sass, as you remember, Bootstrap 3 - Less. And this is a huge plus, as for me for v4. It's not for nothing that Sass is recognized as the most widely used CSS preprocessor (for me personally, the code written on it is more readable and understandable, and the functional is slightly better than competitors).
Also worth noting is that the Bootstrap 3 is built only on floats, while Bootstap 4 offers us to choose between float ... and flexbox! Yes, it happened. Imagine that in the 4th version you have no problem aligning vertically and the problem of columns of the same height just like in Axure UX design. This is just a several things, which can offer Flexbox.
Change the vertical and horizontal alignment on different devices using utilities and classes, such as:
align-items-lg-start, and so on. Change the order of your columns using
ml-auto, which will align your element to the right or left. You can check the demo here.
And what about the columns of the same width without specifying the explicitly labeled class numbers? Very easy! Inside your row just place as many "div" with the class
col as you need and they will have the same width. Suppose your grid has the following form:
The result is 3 columns of the same width on all devices.
There was no such possibility in the 3rd version. Impressive, is not it? In addition, it is possible to create columns that change their width depending on the content. To do this, you need to use the following class -
col-md-auto (instead of
md substitute the another breakpoint).
As for the media queries, the new version also takes over here. After all, now we have the opportunity to more flexible approach to changes styles of the page on various devices. And all because now in the grid system there are the following breakpoints:
extra large (>= 1200px)
large (>= 992px)
medium (>= 768px)
sm (>= 576px)
xs (< 576px)
In the bootstrap 3 of these breakpoints there were only 4 and this sometimes created some problems when marking on small tablets and phones with a big screen.
It's worth noting that not all elements in Bootstrap 4 have
display: flex property. If you need to make a "flex" element, then you should use the
display utility. For example, add a class
.d-sm-flex, when you need to apply the utility only for devices of the
sm category and above. For an item with the
.d-flex class, there is a set of flex utilities with which you can change the axis of the container, reverse the order, align elements inside the container, and so on. These include:
.justify-content-sm-start and other variations.
To summarize, we can say that the 4th version is much ahead of its predecessor. I advise you to use it on your projects, because it is very important to keep up to date and use only the latest, high-quality and relevant tools when developing your product. At the moment, Bootstrap 4 has moved to the beta stage, and the official release is scheduled for 2018. Look forward to! Create modern and adaptive pages with Bootstrap!