Using (and Enjoying) Bootstrap 4

Bootstrap 4 is finally out (beta version at least), but will it continue to justify its status as the most popular css framework in the world? Here at BigPanda we did a thorough study on the new library, and we though to share the effort.

Should you Use Bootstrap 4?

There are plenty of awesome libraries out there (Semantic UI, Bulma, and many more). I’m not going to bash each one, they all have their advantages. Instead I want to focus on the two things I like the most about the new Bootstrap 4:

Stability

The most important thing any css framework should offer is stability. Anyone who did even a little UI work on a web project, knows there are about a million different things that can go wrong with even the simplest of buttons. Different browsers on different devices make it hard to keep a unified design. And don’t even get me started on dynamic content, which forces you to foresee endless possibilities of breaking your design. Bootstrap 4 offers a huge toolbox of components which rely on the vast real-world experience Bootstrap gained over years, so you can be sure that what you see is what your users see.

Flexibility

But stability usually comes at the cost of agility. Making even small changes could compromise the entire layout. But you don’t want to make “small changes”. You want a design that is unique and special, just like you. Here is where Bootstrap really stand tall above its competitors: It offers flexibility, and brings it to a level I’ve never seen before on any framework. So next time your design team comes up with some crazy new ideas, you don’t have to crush their dreams, nor slave over making them come true.

This flexibility is rooted deeply into the core architecture of Bootstrap and is manifested in different aspects -

1. Modular components, with extensive nesting capabilities, enabling robust design all the way from the general layout to the tiniest component.
2. Variable driven SASS that offers centralized control and reusable values, including colors, sizes, feature-flags, and even class names.
3. Pixel-less measurements, with the entire framework based on REM units that were introduced in CSS3 and enable robust scalability.
4. Utility classes allow code-less yet powerful control over various properties such as color, state, alignment and much more.
5. SASS Mixins to easily create your own styling while staying within the architecture of the framework.

This mixture of stability and flexibility IMO is what makes Bootstrap 4 not only the most popular framework around, but also the bestest.

How to Enjoy Bootstrap 4?

This is not a tutorial, just a spotlight on some cool features and good practices to help you get the most out of Bootstrap 4, at no particular order -

RTFM (Read the Fabulous Manual)

Bootstrap 4 provides wonderful documentation with plenty of code samples and pro tips. Spend some time getting to know it, it’s a great tool and I use it almost daily.

Be Griddy

Bootstrap’s flex-based grid system is a true gem. apart from being easy and intuitive to use, it also promises a very stable and seamless layout (even when nesting), that can easily become mobile friendly with responsive modifiers.

You can read all about the gritty little details in the docs, but to illustrate the point, this layout can be achieved -

… with just a few lines of self-explanatory code -

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

You can set different widths by replacing col with col-x, x being the number of columns over which this column should span, out of possible 12. BTW, you can change the total number of columns by setting the variable $grid-columns.

You can also set different widths for different breaking points to achieve responsiveness. For example, using col-4 col-sm-6 means it would normally span across 4 columns (third of the row), but for screens with a view port of sm (small) or under - the column would spread to 6 columns (half the row). Out of the box you’re provided with five breaking points to choose from (xs, sm, md, lg, xl), and as always - you can manually add or change those by setting the right variables.

Create you own Theme

This is probably the coolest thing about the new Bootstrap: Almost nothing is hardcoded - most css properties are derived from variables. Even class names can be changed with variables. Let me give you a quick look under the hood:

You can find all variables inside bootstrap’s project folder, in scss/_variables.scss. First, make a copy of this file and keep it in your source folder, so all changes you make are kept as part of your project.

Next, make sure your project compiles bootstrap’s SASS files. If you simply try to import bootstrap.css into your project, no variable you change would make any difference. That’s because variables are interpolated only when SASS compiles your .scss files into .css files. So your main .scss file should look something like this:

@import "style/variables"; // first, import your local variables
@import "~bootstrap/scss/bootstrap.scss"; // then, import bootstrap
@import "something"; // and last, import all your own styling

TIP: The variables list is very long. To help you navigate, the bootstrap team bundled them under various sections. Each time you style a component, look for the related section, and see which variables can help you make the changes you need. But sometimes that’s not enough, and you want to see exactly how this style or another is using variables. No problem — all of bootstrap’s SASS files are out in plain sight. To help you know which file to look for, enable source-maps in your sass build (or in whichever bundler you use), and the chrome inspector will show you exactly which source files are used.

Spacing and Other Utilities

Don’t you hate it when you have create new classes and write yet another css rule, only for something as mundane as padding or alignment? No more! With bootstrap’s utility classes you can tweak your markup easily!

Spacing for example is one of the most useful utilities: you can set margin or padding by simply using classes such asp-t-3, which adds padding-top, and the number (between 0 and 5) represents the amount of spacing in relation of the $spacer variable, which can be set manually.

Stay in the framework

Bootstrap isn’t some magic pill your project takes and suddenly everything looks amazing. At the end of the day all bootstrap gives you is a collection of classes and some markup. It’s up to you to make sure you implement these classes when you can. Otherwise, you won’t get to enjoy all the benefits of bootstrap.

So whenever you sit down to create a new element, or write your own classes, ask yourself if you can build it with bootstrap’s native components (go through the docs). The closer you stay to the framework, the more stable and robust your styling will be. Remember that bootstrap was built with modularity as a priority. So there is a good chance you have at your disposal the atoms and the molecules you need to create whatever element you’re craving.

Use 3rd party Libraries

Bootstrap is a great foundation, but it doesn’t mean you have to build the entire building yourself. Many javascript libraries wrap bootstrap’s markup and classes with easy to use components. ng-bootstrap, reactstrap, ng1bs4 and many others.

To Sum Up…

Creating a design that is both unique and efficient is the corner stone of any good website or web app. Bootstrap 4 is making this goal closer than ever, with its modular architecture and seasoned practices, as long as you know how to make the most out of it. Hope this story helped, and I’ll love to hear about your experience with bootstrap. So drop a review in the comments, and feel free to share any questions.