Bootstrap 5 Alpha - Overview of new features and changes


Share it: facebookTwitter | LinkedIn

Finally! The Twitter Bootstrap team has released an alpha version of the popular Bootstrap framework. Ambitious front-end developers can now experiment with the new bootstrap version and test the new features. Our team has already taken a closer look at Bootstrap 5 Alpha. In the article you will learn the most important changes and innovations of Bootstrap 5 Alpha.

Bootstrap 5 does not need jQuery

At Bootstrap 5, some major decisions have now been made to meet today's modern standards. For example, jQuery was completely banned from the framework and all components were rewritten in "pure" JavaScript. This is absolutely up-to-date and will surely also benefit the performance of future bootstrap projects.

Responsive font sizes now a new standard

In Bootstrap 5, responsive font sizes have now been activated by default, so that the text can be scaled more naturally across device and viewport sizes.

Navbar component improvements

  • Removed redundant "display: inline-block" from Flex child elements
  • line-height: inherit; has been removed.
  • Navbar component now has a "container" element by default

The following example shows a basic component without menus, only to illustrate the use of the container element within the Navbar component.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

New classes for fullscreen modal windows

In Bootstrap 5, modal windows can finally be displayed across the entire window area. The new classes for fullscreen modals even contain breakpoints, e.g. to display optimize only on certain screen sizes or devices.

Finally horizontal spacing for columns!

A very important innovation are the new classes (gutters) for horizontal spacing of grid columns. Which bootstrap developer hasn't had this yet? To reach a distance under the grid columns, you had to use the normal distance classes like "mb- *". Now there are some interesting new classes for this purpose. More about this here.

Column spacing in REM instead of pixels

The standard column spacing is now 2rem instead of 30px. In this way, spacing tools can be used to optimally align the grid. More on this.

Better nesting of rows

In Bootstrap 4, elements with the .row class could not be nested. If you tried to add a .row to a .col- *, the gaps caused conflicts. Removing the spaces from nested rows (.row> .row) allows rows to be nested more flexibly.

The jumbotron component has been removed

To be honest, we have always wondered what this "jumbotron" class should do. You could always achieve the same effect with the helper classes for paddings and background colors. So this makes perfect sense. Good bye jumbotron!

Card-Decks has been removed

The "card-deck" class was removed in version 5, because the extended classes for "row" now provide options for displaying cards. An example of this can be found here.

Colored Links Classes

So far, the classes "text-color" could be used to color texts, words or hyperlinks. From now on there are separate classes that start with "link-". More.

Forms optimized

More styles for form elements and checkboxes, fundamentally revised form section. Each check box, radio, selection, file, area, and more has a custom appearance to unify the style and behavior of controls in the operating system and browser. These new form controls are all based on completely semantic standards - no more unnecessary markup, just controls and labels.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Overview of removed CSS classes

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host