Bootstrap 5 Alpha— Initial Look

Bootstrap 5 Alpha is here, and these are a couple of things that I found to be pretty interesting!

The logo

Yes, I know! This might not matter much to a developer using bootstrap, but that new logo looks simple and cool. The letter B inside a set of curly braces gives it a pretty unique look.

Goodbye JQuery

Bootstrap5 has dropped JQuery, but all the JQuery dependant features such as modals still exist(written in JS now). This not only removes a third party dependancy, it also reduces the final bundle size. However, popper.js still needs to be included, for the tooltips to function.

IE Support

Support for IE has been dropped completely since Bootstrap5 supports a lot of custom CSS properties and yeah, you guessed it. IE has no support for these.

Improved Color Palette

Similar to other frameworks such as Materialize, Bootstrap5 has many different shades of it’s colors, ranging from 100 to 900 with increments of 100. Color contrast has been improved as well. More info can be found on it at https://v5.getbootstrap.com/docs/5.0/customize/color/

Over 2 dozen CSS Custom Properties

All the custom properties in Bootstrap5 start with the prefix bs-. CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, the following code resets our page’s font and link styles with CSS variables.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-light);
}

Form Updates

The documentation for forms have been hugely improved. The checkbox, radio button, select lists and switch controls have custom styles by default, instead of having to add custom-control-inputas a class. This ensures that the components look uniform regardless of the browser. Visit https://v5.getbootstrap.com/docs/5.0/forms/overview/ for more info on forms.

A brand new color-picker component has been added.

Utility API, the biggie!

Take a look at the following sample

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Let’s try understanding this a bit more in detail. So, what does this do? We are creating a utility for opacity. The key is irrevelant, but let’s all please be good developers and not name the class as X-Æ-A-12 ;). We then instruct bootstrap that we are creating an utility for the opacity property. The ‘class’ indicates how will be using the utility. In this case, it will be o-*.

Finally, we have a list of values where the LHS indicates the class and RHS indicates the value.

The above utility outputs

.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

That is sweet! We don’t need to write mixins or these classes manually anymore!

Layout

A new breakpoint ‘xxl’ has been added for ≥1200. Gutters can be added using the g-* class.

Brand new Icons!

Bootstrap5 has it’s own icon library. This means that we don’t have to rely on 3rd party icon sets like fa for general purpose icons. The icons look pretty crisp too! https://icons.getbootstrap.com/ for more. Of course, they are svgs!

This surely doesn’t cover everything that’s in Bootstrap5, but these are somethings that I found to be pretty cool. Thanks for reading!