Bootstrap 4 Beta 3 - The Last Beta of Bootstrap 4 is Here

-



This is exciting!!! On 28th December 2017, the final beta version of Bootstrap 4 was released. So the much anticipated stable V4.0.0 is just around the corner.

Bootstrap is a very popular front-end framework that helps create mobile-first, responsive web applications quickly and easily. The advantages of Bootstrap include high customizability, easy to use, easy to learn, awesome grid system, amazing support, a huge community behind, and of course being mobile-first and responsive. Bootstrap is basically a lifesaver for many developers.

The version 4 of the Bootstrap has been under development for over two years now. This was a long wait since the first alpha release on 19th August 2015. Bootstrap 4 brought some major changes to the framework and all the good ones. And hence, Bootstrap 4 is the most awaited version.

Now that beta 3 is released, for all those people who have started with Bootstrap 4 already, Beta 3 has some breaking changes since the last beta. Check out the beta 3 ship list for the detailed information about the changes in the latest release and visit the official blog to know what's new and coming.

But the good news is the final stable version will not bring any more breaking changes to it. So it would be safe to update your work to Bootstrap 4 beta 3 and be prepared for the final release. The final stable version is likely to be released in a matter of weeks after the beta release.

What changed in Beta 3?

Beta 3 brings a little more changes than expected. But with a promise that there will be no more breaking changes in the final stable version. The changes in Beta 3 applies if you are migrating from Beta 2 to Beta 3, or any of the older versions of Bootstrap.

Beta 3 primarily focuses around our forms, but it also includes key fixes to tables, some global styles, our documentation, and some JavaScript bugs. Following this release, we’ll address a few issues and PRs before doing a stable v4 release a week or two into the New Year.

Rewrote native and custom check controls

The <input> and <label> has been removed to simplify the markup for both browser default and custom checkboxes and radios. Now, all the checkboxes and radios have parent <div> and sibling <input> and <label> pair.

Also, the custom checkbox and radio elements no longer have a .custom-control-indicator. This is generated from the new .custom-control-label.

Rewritten Input Groups

The input groups are rewritten with specific .input-group-{prepend|append} classes.

The responsive classes are once again parent classes

The responsive classes are once again parent classes to avoid accessibility issues with a changing <tables>'s display.

Deleted Class

The class .col-form-legend has been deleted and its styles have been consolidated into the .col-form-label class.

There are more changes and some features that come with the beta. To know more about them, go to the Bootstrap migration documentation.

What are the major changes in the framework till now?

Bootstrap 4 is a major rewrite of its predecessor. It has many changes that changed the landscape of the framework. The changes made the framework all the more powerful, easy to use and have made development easier and quicker.

For those who have not started with Bootstrap, now would be a great time to start. Not just because how awesome Bootstrap 4 is, but also because the Bootstrap team has now stopped the development of Bootstrap 3 but will keep on to maintain and support the version.

1 - From Less to Sass

Bootstrap 4 moved from Less to Sass as CSS preprocessor. This makes Bootstrap compile much faster. Also, Sass is very popular among developers and has a huge community of behind it.

2 - Flexbox by default

Flexbox is a powerful CSS tool that provides more control and flexibility in the component layouts. It makes creating a responsive web application very easy. Until Bootstrap 3 flexbox was opt-in.
Being flexbox, it is now very easy to create rows of equal width, cards with equal width and height, the flexbox utility classes make changing the display, direction, alignd rem as the primary CSS uniment, scaling etc. very easy.

3 - Relative CSS Units

Bootstra[ moved from pixels to em ants. This ensures better responsiveness of typography and ensures that the Bootstrap site will scale to work with devices of any screen size.
Since the viewports of a device cannot be defined using relative CSS units, grid breakpoints, media queries, and container widths still use pixels.

4 - Improved Grid System

Bootstrap has a very powerful, sophisticated grid system that makes creating a responsive application a very easy task. Before the version 4, Bootstrap had a 4 tier grid system. Bootstrap 4 introduced another breaking point for the extra small devices which makes a 5 tier grid system in the latest version. Bootstrap 4 is now mobile first, so the grid system has now a new great point that starts with the extra small devices and then scaling up.

5 - The Improved Navbar

The navbar in Bootstrap 4 has been completely rewritten in flexbox. Navbar utilizes flexbox utilities to give better built-in responsive behavior.

6 - Drops IE9 Support

Going flexbox by default came at the cost of dropping the support of IE9. If you need support for IE9, then you can continue using Bootstrap 3.

7 - Cards instead of wells, thumbnails, and panels.

The wells, panels, and thumbnails have been replaced by cards. The cards are built with flexbox of course, so it is very easy to create cards of equal height and width. And with the flexbox utility classes, it is very easy to manipulate the layout of the cards.

8 - Tooltips and Popovers

Bootstrap 4 used a third party library called tether for the positioning of the tooltips and popovers. In the later beta release Bootstrap 4 uses another third party library called Popper.js for the purpose of positioning of tooltips and popovers.

Recommended reading: How to Use Bootstrap 4 with Angular

So is it okay to use the final beta in a production environment?

Now that the final beta has come and the stable version can be expected within a couple of weeks, it is good to go to be used for development. The stable version is not going to bring any breaking changes so you can start using Bootstrap 4 to build your website. You can test with the beta version so that when the stable version finally comes you stay up to date with the framework.

Comments

Post a Comment

Popular posts from this blog

All You Need to Know About Parallax Scrolling

-
Image
The first time I saw parallax scrolling on a website, to be very honest I was awestruck and very impressed. I could keep my finger off the scroll. I mean how do they do it? Here you are scrolling down a web page like you would do on a normal day, but while doing the same monotonous scrolling, something magical and unexpected happened. The pages were not moving the way I am used to seeing them move. So, what is parallax scrolling? Let's take a look. The parallax scrolling in web design is a design practice in which the foreground of the website moves at a different pace than the background creating the illusion of a 3D effect. The images in the foreground and background are arranged in multiple layers and they move independently. The parallax scrolling in the website was first created in the year 2011, and since it has been used widely all over the internet. To see parallax scrolling in action check out this list of  30 Great Websites With Parallax Scrolling ....
Read more

What makes a Design Good or Bad?

-
Looks matter. As bad as it sounds, but when it comes to web design, the way your website looks can be the deciding factor for people whether they want to stay on your website or not. Poor design can make users take more time and effort to do their intended task, leaving them dissatisfied or even frustrated. And they would hesitate to visit your site again. Needless to say, having a negative impact on your business. Other consequences of having bad design are that people will doubt the quality of your product or you lose your credibility. You may get bad reviews for the usability of your design. And the worse thing is, you are practically helping your competitor. What good design can do for your website are quite obvious. It can bring more traffic, your conversion rate increases, increase the credibility of your brand, make the user experience better making more users to stay on your website, gives you room for development, bring down the cost of maintenance and mo...
Read more

Simple and Responsive Free Bootstrap Admin Dashboard Templates

-
Image
It is true that designing a professional-looking and highly functional website used to be an expensive and complicated task. However, that’s not the case anymore, as there are plenty of free Bootstrap admin templates available in the market. The following is a list of responsive and simple free bootstrap admin dashboard templates that will help you to easily design websites. Star Admin The easily customizable and fully responsive, Star Admin free bootstrap admin template offers a classy and unique look to websites. This template offers a wide variety of excellent components that are essential for designing and customizing a website. Purple Admin The well-written code and neat design of Purple bootstrap admin template have urged several web designers to settle for this template. This excellent theme contains plenty of well-designed components and basic UI elements. Material Admin The best thing about material admin template is that it guarantees a fine user...
Read more