Bootstrap 4 – New Features

Bootstrap 4 has been in the making for over 2 years, and has yet some way to go until it is stable. However, as we are nearing a beta release, we can confidently list some of the major features and changes to expect when migrating from Bootstrap 3. To focus in on the latter; a migration will not be trivial, as Bootstrap 4 is a complete re-write of its predecessor. Unlike Bootstrap 3, Bootstrap 4 is written in Sass (Syntactically Awesome Stylesheets). This is bad news for those sites that rely heavily on Bootstrap 3 variables.

This article is published from the DNC Magazine for Developers and Architects. Download this magazine from here [PDF] or Subscribe to this magazine for FREE and download all previous and current editions.

The second major change comes with the components that Bootstrap 4 supports - or, in fact, whose support it drops: as of Alpha 4, Bootstrap no longer supports panels, wells or thumbnails. Instead, these have been replaced with one single concept: cards. Cards aim to serve the same purpose than wells and panels, but are less restrictive by supporting different types of contents, such as lists, images, headers and footers. The badge component has also been dropped: instead, Bootstrap requires you to use the label component.

Figure 1: An example of Bootstrap’s the card component: the top area of the card is taken up by a placeholder image, whilst the bottom area displays the card’s content.

What’s New in Bootstrap 4

Reboot: The new Normalize

In order to provide a foundation from which all HTML elements would have a consistent appearance across browsers, Bootstrap 3 used Normalize.css. Bootstrap 4 on the other hand uses an improved version of Normalize.css called Reboot. As per the Bootstrap 4 documentation: “Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors.” (https://v4-alpha.getbootstrap.com/content/reboot/). Although an important change, the migration from Normalize to Reboot goes largely un-noticed when actually using Bootstrap during development.

The Grid System

Just as with Bootstrap 3, at the core of Bootstrap 4, lies its grid system: a collection of CSS classes and media queries that allow developers to produce a responsive page layout. With Bootstrap 4, the grid system itself has been completely over-hauled, however luckily, most changes themselves are not breaking (see section “Notable classname changes”), as most class names have stayed the same - although it does introduce a new grid tier with a breakpoint at 480px, and a new sm grid tier. This gives Bootstrap 4, four grid tiers, instead of 3: xs, sm, md, and lg.

The addition of the sm grid tier means that Bootstrap now has five breakpoints:

• An extra-small breakpoint for handheld devices that boast a smaller screen than normal (0px)

• A small breakpoint aimed at phones / handhelds (544px)

• A breakpoint for screens of medium size, such as tablets (768px)

• A breakpoint for large screens - that is, desktops (992px)

• An extra-large breakpoint to support wide-screen (1200px)

These five breakpoints are defined as properties of $grid-breakpoints, and are defined in _variables.scss:

$grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
   sm: 544px,
   // Medium screen / tablet
   md: 768px,
   // Large screen / desktop
   lg: 992px,
   // Extra large screen / wide desktop
   xl: 1200px
   ) !default;

Furthermore, all grid classes can be disabled by setting the $enable-grid-classes variable inside _variables.scss to false, and recompiling Bootstrap. It should be noted that Bootstrap 4 places a great emphasis on customisation, and as such, _variables.scss offers any easy way to configure and customize Bootstrap.

Flexbox

By setting $enable-flex inside _variables.scss, Bootstrap 4 allows you to enable Flexbox support for the grid system, media components and input groups. To readers unfamiliar with Flexbox: Flexbox is a layout model that allows for the building of layouts that are more complex than the usual CSS2 layouts such as block, positioned or table. Whilst not aimed at replacing existing page layout functionality, the layout model is ideally used when needing to order or scale elements or needing more advanced vertical or horizontal alignment capabilities.

Typographic units of measurement

Typographic units of measurements are used to define the size of a page’s font and elements. Bootstrap 4 uses a different type of typographic measurement to its predecessor, moving away from using pixels (px) to using root em (rem). The use of pixels has, in the past, resulted in rendering issues when users change the size of the browser's base font. Since rem is relative to the page's root element, sites built using Bootstrap 4 will scale relative to the browser's base font. Furthermore, the global font-size increased by 2 pixels, from 14px to 16px.

Style and appearance

Aside from font-size changes, the overall look and feel of Bootstrap has not drastically changed. There are some minor changes around the size of elements, padding and margins, as well as the primary context colour, whose background colour has changed from #2f79b9 to #0072db. Bootstrap 4 also no longer ships with Glyphicons, making the framework more lightweight but also requiring you to either manually integrate them, or choosing an alternative.

Improved form controls

Possibly one of the most exciting new features that ship with Bootstrap 4 are its improved form control styles. The current Alpha release comes with validation styles that finally render the many third-party Bootstrap validation plugins obsolete (see figure 1), and as such greatly improve the “out of the box” experience. And on top of this, Bootstrap tackles the problem of inconsistent form input control appearance across different browsers, by offering custom check boxes and radio inputs.

Figure 2: An example of Bootstrap’s input validation styles: has-success and has-error will cause corresponding feedback icons to be displayed, along with applying the correct context colours .

By applying the custom-control class along with either the custom-checkbox or custom-radio class to the parent element of any input element that has been assigned the custom-control-input class and which contains a sibling with the custom-control-indicator class, Bootstrap will ensure consistent render across different browsers:

<label class="custom-control custom-checkbox">
  <input class=“custom-control-input" name="checkbox" type="checkbox" >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">My checkbox</span>
</label>

Figure 3: An example of custom radio and checkbox controls using Bootstrap 4.

Navigation

Another nice change that ships with Bootstrap 4 is the simplification of the navigation component. In order to get navigation working in Bootstrap 3, one would need to create a list of elements, using the nav base class. One would then need to apply the nav-tabs class, and necessary styling to the tab headings. This was somewhat unintuitive, and produced slightly messy markup:

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li role="presentation" class=“active">
	<a href=“#my-id" role="tab" data-toggle=“tab”>Foobar</a>
  </li>
</ul>

In contrast, with Bootstrap 4’s new navigation classes, this markup becomes clearer and easier to read:

<ul class="nav nav-tabs nav-justified">
   <li class="nav-item">
       <a href="#my-id" data-toggle="tab" class=“nav-link active">Foobar</a>
    </li>
</ul>

That is, Bootstrap 4 introduces: i) the nav-item class for denoting navigation elements, ii) the nav-link class for denoting the actual anchor elements. Furthermore, it requires the anchor element, not the nav item element, to be used when denoting whether a link is active or not.

Another notable addition when it comes to navigation, are the navigation bar styles: navbar-dark and navbar-light. These two classes simply set the color of the navbar to white or black, in order to support a dark navbar background or a light navbar background. This allows one to easily change the appearance of the navbar by applying context classes. For example:

<nav class="navbar navbar-dark bg-danger">
</nav>
<nav class="navbar navbar-light bg-success“>
</nav>

Figure 4: A sample navbar with navbar-dark and bg-danger applied.

Last but not least, Bootstrap 4 ships with a new button style: btn-outline-* (where * denotes the context style) for creating button outlines. For example, to create a primary button outline, one would apply the ban-outline-primary class.

Figure 5: A normal button using btn-primary (left) and a button outline using the btn-outline-primary class.

Dropdowns

Similar to navigation items, every dropdown item now requires that the dropdown-item class be applied to it. Furthermore, the caret symbol is now automatically applied to dropdown toggles that have been denoted as such using the dropdown-toggle class. The markup for a typical dropdown navigation menu item in Bootstrap 4 would look as follows:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type=“button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    My Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href=“#”>My Menu Item</a>
  </div>
</div>

Pagination

In line with the changes introduced for the navigation bar and dropdowns, the markup required to produce a pagination component has also been clarified: unlike Bootstrap 3, Bootstrap 4 now requires one to explicitly denote the pagination and link items items using the page-item and page-link classes respectively. That is, in Bootstrap 3, we could simply create a pagination component by applying the pagination class to any ul element:

<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
</ul>

In Bootstrap 4, we must instead denote the individual pagination item and links:

<ul class="pagination">
    <li class=“page-item”><a class=“page-link” href="#">1</a></li>
    <li class=“page-item”><a class=“page-link” href="#">2</a></li>
</ul>

Browser support

Bootstrap 4 supports all major browsers, including Chrome, Safari, Opera and any version of Internet Explorer greater than 8.

Notable classname changes

In addition to the previously discussed feature additions, removals and/or changes, Bootstrap 4 Alpha introduces a bunch of notable class name changes to watch out for when migrating:

• The btn-default class name has changed to btn-secondary.

• Extra small buttons no longer exist, as the btn-xs class has been removed. Likewise, extra small button groups no longer exist through the removal of btn-group-xs.

• The divider class used as part of dropdowns has been renamed to dropdown-divider.

• The navbar-form class has been removed.

• The label has been replaced with the tag class.

• The Carousel item class has been renamed to carousel-item.

• The offsetting of columns has changed, from .col-*-offset-** to .offset-*-**. So, for example, .col-md-offset-2 becomes .offset-md-2. Similarly, the pushing of columns changed from .col-push-*-* to .push-*-*.

Plugins

There are no nasty surprises or drastic changes in how Bootstrap plugins are composed: As with Bootstrap 3, plugins are split across two files - a JavaScript file, and a file containing style rules. In the case of Bootstrap 4, these style rules are of course written using Sass. For example, the Bootstrap button plugin consists of: bootstrap/js/src/button.js and bootstrap/scss/mixins/_buttons.scss. As Bootstrap is compiled, they are integrated as part of the Bootstrap distributable, and as such, the end-user needs to spend little to no time worrying about them.

The JavaScript file typically contains the class definition that defines the actual plugin, and a data API implementation which hooks on the DOM, and listens for actions. For example, the data API implementation of Bootstrap’s button plugin looks as follows:

$(document)
    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
      event.preventDefault()

      let button = event.target

      if (!$(button).hasClass(ClassName.BUTTON)) {
        button = $(button).closest(Selector.BUTTON)
      }

      Button._jQueryInterface.call($(button), 'toggle')
    })
    .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
      let button = $(event.target).closest(Selector.BUTTON)[0]
      $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
    })

Last but not least, the plugin’s JavaScript file contains a jQuery section, which makes the plugin available to the global jQuery object:

$.fn[NAME]             = Button._jQueryInterface
  $.fn[NAME].Constructor = Button
  $.fn[NAME].noConflict  = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Button._jQueryInterface
  }

Whilst adding the plugin to the global jQuery object, one can use any non-conflicting name. In the case of the button plugin, this name is simple the string button.

Utility classes

With Bootstrap 4 comes a nice addition of various new utility classes, without breaking any of the existing major functionality. For one, the text alignment classes remain the same, with a the nice addition of responsive text alignment classes: text-*-left, text-*-center and text-*-right. For example, to center text on medium (MD) viewports, one would use the text-md-center class.

The new utility classes also provide various shortcuts that allow you to avoid having to set inline styles or write your own classes: the d-* classes allow you to set the display property to either block, inline or inline-block. For example, d-block will set the display property of an element to block, whilst d-inline-block will set it to inline-block. Similarly, the w-* classes, allow you to quickly set the width of an element to the desired %. As such, w-100 would set the width property of an element to 100%, whilst w-50 would set it to 50%. Similarly, the Bootstrap 4 comes with short-hand rules for setting the margin or padding of an element. The classes take the form of --. Within this context, the allowed property abbreviations are m (margin) and p (padding), whilst the permissible side abbreviations are t (top), b (bottom), l (left), r (right), a (for setting both top, bottom, left and right), x (for setting both left and right) and y (for setting both top and bottom). The size is an integer in the range of 1 - 3, inclusive. So, for example, to set the left margin of an element to 0, one would use the class m-l-0.

Another nice addition are responsive floats: Instead of just being able to use pull-left and pull-right, Bootstrap now allows for responsive floats, depending on the viewport size by providing the classes pull-*-right and pull-*-left.

Last but not least: the new utility classes also include support for responsive embedding. Using responsive embedding, the aspect ratio of embedded media will scale with the viewport size. Simply apply the embed-responsive-item class to any iframe, object, video or embed object.

Ready to try Bootstrap?

If you are now ready to explore Bootstrap 4 Alpha on your own, then head over to http://v4-alpha.getbootstrap.com.

Alternatively, you can install Bootstrap 4 Alpha using npm or bower:

npm install bootstrap@4.0.0-alpha.4

or

bower install bootstrap#v4.0.0-alpha.4 

Conclusion

Being a complete re-write, Bootstrap 4 differs to its predecessor in many ways. Luckily, the vast majority of differences are subtle and none-breaking. This article covered some of the most obvious differences, highlighting the most anticipated new features.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Benjamin Jakobus is a senior software engineer based in Rio de Janeiro. He graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. For over 10 years he has worked on a wide range of products across Europe, the United States and Brazil. You can connect with him on LinkedIn.