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:
The primary CSS unit is switched from
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 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
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.
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: