On its 4th Birthday Bootstrap gave its fans access to the newest upgrade known as 4 Alpha. If you are unsure what a bootstrap (aside from the one on your boots) even is, you can catch up on the basics first. 

It's okay, we will wait. 

Finished? Now that you are familiar with the most popular CSS, HTML, and JS framework, we will cover some of the new items they are bringing to the table. 

New Features

Bootstrap has always offered comprehensive features that tackle browser compatibility issues and work effortlessly on mobile. 

Cards

You will be saying goodbye to 'Wells', 'Panels',  and 'Thumbnails' for a new concept called 'Cards'. 

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

4V-Alpha

What exactly does this include? 

Card Columns

Card Titles

Color Variations

Inverted Cards

Card Decks

Image Cap

Responsive: Flexbox Grid

Bootstrap began using Flexbox which is a responsive grid system.

Most grid systems today use one of two layout methods: float or inline-block. But neither of these methods were really intended to be used for layout and as a result have pretty significant problems and limitations.

Solved By Flexbox 

Flexbox Features

• Each grid cell is the same width and height as every other cell in the row.
• Aligned vertically to the top, bottom, or middle.
• Add one class for customization as opposed to repeating over and over.

Compiling & Consolidating

Compiling anything immediately tends to sound boring, but the expection to the rule is when it makes your website light and fast. Often times, sites fail page speed tests due to bulky code. 

What does the new Alpha offer?

• Bootstrap switched processors and now they are Sass only
  • Sass lightens your load by condensing CSS used
• All JavaScript plugins have been rewrote in ES6 to take advantage of the newest JavaScript features. 
• All HTML resets have been consolidated into a new module called 'Reboot'. 

What About V3? 

When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

Bootstrap Blog

While the updated V4 has a ton to offer, you do not need to freak out about switching frameworks just yet. V3 is still fully supported and documented.

Also, if you use Internet Explorer 8 or need to reach a specific group of people that do, you may want to keep with V3 since V4 dropped support for this browser.

Get Building

Too tedious to code out a website and do your full-time job? We are here to help.