What Designers Need to Know About Bootstrap 4

Since August 2011, when Bootstrap was first launched, it has gained popularity in the web design and development world. From entirely CSS-driven style sheets to a powerful, mobile-first, responsive, front-end framework with lots of new features added including host of JavaScript plugins, tools and icons that go hand in hand with forms and some more components, it’s safe to say that Bootstrap has come a long way.

As of this writing, we have Bootstrap 4 with an alpha version which is an incomplete release and not suitable for production. With this version there are major changes in store. Lots of new features are added and customization options will be available.

Although there might be some argument about which is the best CSS framework to use, almost every designer can build pretty much anything with Bootstrap, and critics could too if they took a little time to reconfigure default Bootstrap styling.

Why Designers Love Bootstrap

Bootstrap, of course, is not the only front-end framework out there that enjoys a good share of popularity. On a roughly even par is Foundation. Both are great, and, to be honest, it’s not really a case of one being any better than the other, but rather that some things are more suited to each, and inevitably designers end up with their personal preferences. But, this blog is about Bootstrap, so we’ll leave Foundation aside for the moment, and concentrate now on exactly what it is that suits Bootstrap so well, and why you should be taking note of its capabilities for your web design projects.

1. The Grid System : The grid system is arguably the most important element of a front-end framework. It’s what gives developers the ability to very quickly produce prototype layouts and make changes to them very easily.

Bootstrap is grid system is highly responsive, flexible, and is now optimized for the production of mobile-first design (which, as we have discussed in previous blogs, is highly important since Google’s search algorithm update in April this year). With Bootstrap you can divide your screen into 12 separate columns, which helps no end when it comes to scaling your site to mobile and desktop screens.

2. Sizing Units : Unlike Foundation which uses rems, Bootstrap uses pixels for calculating widths, heights etc. Pixels, of course, are much more familiar to work with, and any developer who has any experience in graphic design will have used them before, which indeed is why many designers love Bootstrap.

3. Open Source : Anything that’s open source is quite frankly amazing in my opinion. And Bootstrap is no exception (and Foundation, too, to be fair). Hosted on Github, it is released under the MIT license, which means that designers have complete freedom to experiment and change the framework however they wish, without having to deal with purchasing and licensing issues.

4. Customization : Yes, harking back to my introduction, Bootstrap is fully customisable, meaning that only the sites which use the default settings should end up with a “Bootstrap look”. All of the CSS and JS behaviour can be overridden, though it has a very large variety of themes readily available, all of which offer something unique. So, even if you’re starting with a theme, you can still customise it to something that’s different than anything else that’s out there.

5. Browser Support : All modern major web browsers are compatible with Bootstrap. What is more, even if a user is accessing a Bootstrap site using a browser that predates html-5, the plugins HTML5 Shiv and Respond.js come bundled in with the default template to overcome this.

Things Designers Need to Know About Bootstrap 4

Bootstrap 4 comes with five major colors inside. These colors comes with their respective classes and prefixes which can be re-used across different components such as buttons, links and alerts. Check out the image below.
Note: In Bootstrap 3, the “btn-secondary” class is the “default” class.

Grid System is Not in Pixels Anymore
In Bootstrap versions 1-3, grids are measured via pixels. However, in Bootstrap 4, grids are measured via ems and rems. So if you are working on a Photoshop layout design of a website it’s quite helpful if you are going to see what the equivalent measurement of ems to pixel.

The Gutter
Bootstrap usually comes with 30 width gutter, 15px on each side of a column. This means padding left and right for column will be 15px each side, where as margin left and margin right for row is 15px. That gives you an idea how you will put spaces on each columns on your designs.

One good thing about Bootstrap 4 is that allows you customize and compile your own build based on your needs. This includes color, container sizes and gutter padding. Often you want to select the column and remove the padding with CSS. You can create your own utility class helper to attain this quickly.

Improved Navbar
The hardest and most tricky thing about using Bootstrap 3 is the navbar. It’s tough to figure out because you need to add a lot of classes just to create it. Moreover, you also need to go to your CSS to customize the colors and some styles.
In Bootstrap 4, there are a lot of classes that were removed and more options to color schemes are added. This gives more options to control the layout of the website’s navigation. You can check the documentation here if you want to learn more.

Opt-in Flexbox for Responsive Design Can be Activated
Bootstrap 4 enables users to use the CSS3’s Flexbox Layout mode. Flexbox is a layout mode that offers arrangement of elements on a page for responsive purpose. It provides a flexible container can expands or shrinks the elements size on different viewports. While this is a great thing about designers trying to make their design responsive, this will only work on browsers higher than Internet Explorer 9.

Optimize Styles Using SASS Instead of LESS
Bootstrap 3 used LESS as its main CSS pre-processor, but due its popular front-end developers contributor it has switch to SASS via Libsass Sass Complier written in C/C++ Bootstrap 4. Now you can customize styles such as color, spacing, link styles, typography, tables, grid breakpoints and containers via _variables.scss file.