Bootstrap 4: What To Know

Fast Web Media

This article has been updated reflecting the official release of Bootstrap Alpha 4.

Over the last few years, developers have been adapting their workflow and creating tools to make the process of building web applications quicker and easier, from each build to the next.

Introducing Bootstrap: a free-to-use mobile first front-end web framework, which contains the boilerplate code necessary to speed up the process of creating applications and deliver projects in a timely and noticeably more reliable manner.

Created by ex-Twitter and current Director of Design over at GitHub (@mdo), the initial Alpha version (v4.0.0-alpha) of the framework was released in 2015, and continues to receive periodic updates. These in-production builds are scheduled to continue until a final release candidate is available for those not willing to wet their feet with early build software.

So, how can you decide whether using the latest version of Bootstrap is worth it to you and your team? This article aims to outline some of the broader changes that were made in the transition from version 3.xx to 4.

What’s New?

Bootstrap 4 is a thorough overhaul of what existed in the previous numbered version. According to its developer, almost every line of code was touched to optimise and enhance the functionality and make using it more of a breeze. Although a lot of the underlying code was changed, providing that you have an understanding of how Bootstrap 3’s file structure and class naming conventions work, the migration process is a simple one.

Some of the global changes you can expect to find are primarily unit-based and include:

CSS pre-processing is now handled by SASS rather than LESS. The primary CSS unit has changed from px to rem.

New Breakpoints

With it being a mobile first framework, the way in which Bootstrap handles browser viewports is crucial to being able to serve up different CSS styles for various devices such as a mobile phone, a tablet and a desktop browser. Bootstrap 4 introduces a new ‘XL’ viewport which is accessible to CSS media queries at a width of 75rem (or 1200px). The purpose of this renamed ‘XL’ viewport is to scale down the remaining viewports to make room for a new mobile specific viewport size, which allows users to take advantage of mobile-specific devices more accurately than before.

With the influx of smart TVs in the consumer market, and popular devices such as Google’s Chromecast enabling us to stream content from our devices to another, it’s likely for content to be viewed on much larger TV sets within the home or elsewhere. The added viewport allows developers to target these very wide desktop views, and optimise the way in which content is viewed for additional devices.

The added level of granularity means that ANY devices can be targeted, including the newest iterations of display technology such as the currently growing number of 4K displays. It essentially future proofs how content is displayed on web-enabled devices..

A More Flexible Grid

It was initially celebrated for its flexible grid system which follows a responsive width HTML syntax, but Bootstrap 4 has gone a step further to specify more precise columns in your layout.

As already mentioned, the primary CSS unit is now using rem rather than pixels. The change in negative margins on each row and standard padding on each column changing values from 15px to .9375rem improves the accuracy of the grid components as they scale to each viewport.

Flexbox Support

One of the newer WC3 standards that has been redefining the approach to creating layouts in modern applications is the Flexible Box CSS3 layout module – or Flexbox for short.

The module ensures that elements within a container are positioned more predictably and children within a flex container now expand to fill its contents regardless of device viewport.

Bootstrap 4 supports this layout module out of the box, with its grid components inheriting the flexbox properties. You are able to enhance your layout with additional utility classes, but you aren’t required to do anything else – it’s suitably handled for you!

Additional Utility Classes

One of the time-saving and simplifying features of Bootstrap, is the integration of utility classes that are more commonly referred to as “helper” classes.

Bootstrap 4 has taken this to the next level with the introduction of spacing classes for adding directional margin and padding to elements. Previously, you would have to specify these style properties within your CSS classes or create a utility class of your own.

The class name convention is to be separated into 3 distinct aspects of spacing:

[margin or padding]-[direction]-[size]

If you’re wanting to use margin or padding:

  • “m” for margin
  • “p” for padding

To apply a direction to your spacing:

  • “a” for all directions
  • “t” for top
  • “r” for right
  • “l” for left
  • “x” for left and right
  • “y” for top and bottom

If you don’t require a size, you can leave this blank, or to specify a size of the spacing, you can use:

  • “auto” for auto
  • “0” for zero
  • “md” for medium
  • “lg” for large

The code block below shows a distinct example of one of these utility classes in action:

<div class="row">
    <div class="col-xs-12 col-md-6 m-0-auto">
        <p>Content is King!</p>
    </div>
</div>

IE8 Thrown Out

Web standards are always being called upon to improve as technology evolves, so it was only a matter of time until Internet Explorer 8 support was dropped from modern web frameworks. Microsoft closing official support for its older browser at the start of 2016 was the go-ahead for future versions of Bootstrap to no longer support it either.

“What does this imply?”, you ask, well if you are currently testing your applications across different browsers and devices, this is one less frustration for you to deal with, and you no longer need to use fallbacks that older versions of IE require to function.

If you ever find yourself needing to provide rock-solid support for IE8, you’ll have to stick with and maintain a code base that is using Bootstrap 3.

Alpha 4 Released

Bootstrap has just rolled out its, Alpha 4 update, which is a relatively lightweight but important one. It features key CSS bug fixes on core Bootstrap components, rewritten documentation to provide improved consistency for the end user, and a fix for npm JavaScript compile errors in the previous version.

Along with this update, the developer has also encouraged its contributors to cease working on Bootstrap 3, so that a roadmap for a finalized version of BS4 can be established and its step out the door, accelerated.

To Conclude

It can be risky to use Alpha stage code packages in your production environments, and is not always encouraged, but previous experience and extensive testing has proven that Bootstrap 4’s current version is stable (and exciting) enough to make use of, provided thorough steps have been made to migrate your code base. With development on Bootstrap 3 taking a back seat to its newer build, and a set of milestones in place for a final release of the framework, the development community should remain confident in transitioning to using the latest Bootstrap version.

Has using Bootstrap changed up your workflow or encouraged you to adopt new ways of thinking about development? Tweet us your opinion @FastWebMedia

splitter

We hope you enjoyed that

Related Articles