Featured image for Bootstrap 3 vs. 4: What Changes? Should You Use Bootstrap 4?

// Coding

Bootstrap 3 vs. 4: What Changes? Should You Use Bootstrap 4?

Subscribe to our newsletter
Featured image for 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-item-center, align-items-md-center, align-items-lg-start, and so on. Change the order of your columns using flex-unordered, flex-last, flex-first! Use mr-auto, ml-auto, which will align your element to the right or left. You can check the demo here.

Bootstrap 3 vs. 4: what changes

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:

<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>

The result is 3 columns of the same width on all devices.

Bootstrap 3 vs. 4: what changes

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-flex, .d-inline-flex, or .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: flex-row, flex-row-reverse, .flex-column, .flex-column-reverse, .flex-sm-row, .justify-content-start, .justify-content-start, .justify-content-sm-start and other variations.

Well, I just showed the main differences in a very short form. But there are more of them: what is only the section of the typographies with an improved indentation system for different elements (p, ul, etc.)? To fully familiarize yourself with all the innovations, I advise you to open the official documentation, with which you will immediately find the answers to all the questions interesting you. After that, download Bootstrap 4 to yourself and try it on your own experience. Try yourself it with modern JS libraries and see its power. Maybe you ask: what about support for Flexbox browsers? Can I use the new version of the framework in production? And the answer is, of course, yes! The support is remarkable, all modern browsers support this technology, just do not forget about prefixes.Bootstrap 4 is well suited for the development of small sites and large cryptocurrency platform.

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!

Get a free consultation

How can we help you?

Full name *
Email *
Your budget
Tell us about your project

Vitaliy Shinkorenko
Author of the post

Customer Review