Twitter Bootstrap 4 Alpha Released - New Features

John Avis by | August 21, 2015 | Bootstrap

I've been looking forward to the release of Bootstrap 4 and finally an Alpha version has been released.
Bootstrap 4 Alpha Release

I've been looking forward to the release of Bootstrap 4 and finally an Alpha version has been released.

It's mostly good news, of course.

The only bit of bad news, which was expected, is that support for IE8 and below is not maintained. That's fine for most, but if you develop in an environment where most staff computers are still running IE8 (why, I have no idea) then it means you may have to stick with Bootstrap 3 (like me). Fortunately the developers have stated that they will continue to support Bootstrap 3.

One of the highlights for me was the introduction of an extra grid breakpoint, intended to handle smaller mobile devices. The sizes are now xs, sm, md, lg and xl.

There is another new feature for grids: hidden-*-up and hidden-*-down classes that allow you to target a range of screen sizes.

Panels and wells have been replaced with a new component - cards. All of the previous functionality is still available for the old components, there's just a new set of classes to know and some extra functionality for images, overlays, colours, alignment and link groups. Plus there's some new ways to group them and Masonary-like columns.

In typography, there's some new display headings (which can be applied to H tags) that stand out more than traditional headings.

For tables there is some additional styling of table heads but what looks most interesting to me is the ability to make tables more responsive by having columns reflow onto new rows.

There's some new helper classes for spacing so you can add zero, md or lg spacing.

Navbars have improved styling and colours, but now require some additional work to make them work on all screen sizes. Maybe this will be addressed in a future version for the moment I much prefer the v3 Navbars.

Not much change for buttons other than the addition of outline buttons.

For forms, horizontal forms no longer need an additional class, but there's some new custom form elements with fancier styles.

There are plenty of other changes, including renaming of many classes for consistency. There has been a significant reduction in file size which is also great news. This is largely due to dropping support for older browsers, and is similar to what has been done with jQuery v2 (which is also the default version for Bootstrap 4, so even more file size savings).

It's well worth looking at the alpha documentation to get an idea of what to expect. It will be great when we can switch from Bootstrap 3 to 4 for production websites.

Related Posts

Bootstrap Cool Websites

Bootstrap 4 beta Customiser

by John Avis | October 31, 2017

I love Bootstrap v4 and now that it is finally in Beta can start to use it in new projects. But I miss the online customizer that was available for Bootstrap v3.

Bootstrap ASP.NET Web Forms

ASP.NET Web Forms and Bootstrap 3 and 4 Modals

by John Avis | July 6, 2017

There are a few methods for hiding and showing Bootstrap 3.x and 4.x modals in an ASP.NET Web Forms application. This technique is pure ASP.NET (requires no client script) and allows you to show and hide modals by changing the Visible property of a containing PlaceHolder or Panel.


Bootstrap 4 card with outline headers and footers

by John Avis | December 22, 2016

If you use Bootstrap 4 cards and apply one of the outline classes to add some colour you will find the header and footer are still grey, which doesn't look right.


There are no comments yet. Be the first to leave a comment!

Leave a Comment
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.


Get the latest posts delivered to your inbox.