Everyone has used Bootstrap at least once in their projects and it’s no surprise, because Bootstrap is really simple and incredibly time-saving. It enables us to design responsive websites with less pain and features components that can be easily implemented: modals, tooltips, tabs, dropdown lists, buttons, and a lot more. The upcoming Bootstrap 4 is by now in an alpha release, so it’s not completely stable and some features may be changed.

Here are some new features you need to know before migrating to Bootstrap 4:

Type

The primary CSS unit is switched from px to rem, which means that font sizes are now related to the root element instead of pixels, and the global font-size is increased to 16px (14px in v3). V4 also includes new large display headings to make titles stand out.

Browser support and flexbox

Some misunderstandings like IE9, IE8 etc. are, thanks be to God, not supported anymore. If you’re unlucky to have to support them, stay with v3. That’s because v4 has moved to Flexbox for laying out the blocks, which makes the grid more flexible. For example, we can now declare a column with ‘.col’ class and it will take all the space available: Bootstrap flex grid

Bootstrap 4 grid docs

LESS to SASS

It’s not that LESS is dead or anything, but SASS is just more preferred these days.

New spacing utility classes

Spacing classes allow us to set margins and padding to the elements using short classnames like .m-t-md, which stands for ‘margin top medium’ . The basic pattern for using spacing classes is {property}{sides}-{breakpoint}-{size}

Spacing docs

New responsive breakpoints

Now the responsive column classes look like this:
  • Extra-small (<544 px)
  • Small (≥544 px)
  • Medium (≥768 px)
  • Large (≥992 px)
  • Extra-large (≥1200 px)

Cards are replacing wells and panels

Ad it’s ok, because cards are extremely flexible. We can also use Masonry style grid (what is masonry?), but keep in mind, that it’s not supported in IE9.

Fresh look

In Bootstrap 4 the elements are switched from gradients to a more flat look. It’s most noticable in buttons and navigation. v4 now also includes outlined buttons, which are activated with ‘.btn-outline-*’ prefix.

The most important thing

Bootstrap 4 is 30% lighter in size than Bootstrap 3.

Some links that might be useful: