Introducing Bootstrap 5!

Welcome to yet another era of class renaming and styling conventions. In the past one week, the Bootstrap team announced its official release of the alpha version of Bootstrap 5, you can get it here: v5.getboostrap.com.

I was particularly excited about this announcement, perhaps because I’ve been a fan of the CSS framework for such a long time. I basically use it in a lot of professional and personal side projects of mine and can’t see any reason why not to.

Bootstrap 5 definitely is a significant improvement from v4 and takes web development to a whole new level with some of the following changes:

1) jQuery, Gone!

The framework for the longest time had been frowned upon due to its dependency on jQuery. Many developers had prayed silently for this to change over the years and now it's finally here! Bootstrap no longer depends on jQuery and it’s also dropped its support for Internet Explorer. Now you can adopt Bootstrap using any JavaScript framework of your choice without fear of conflicts. This also means your projects will be significantly lighter on file size and page load moving forward.

2) Amazing New SVG Icons

The new SVG icons just released with version 5 will have you thinking if you’re ever going to need to use an external font library like Font Awesome or Themify icons. It’s just so cool! Bootstrap 5 really does a great job of giving the development community, some of the best scalable vector graphics ever. And the best part of it is, they’re completely open sourced (MIT), so you’re free to download, use, and extend. You can see them here: Bootstrap Icons.

3) Fully Custom Form Controls

With version 5 Bootstrap goes fully custom with form controls. Now your forms can have a more consistent look and feel across different browsers. According to Bootstrap, “new form controls are all built on completely semantic, standard form controls — no more superfluous markup, just form controls and labels”.

4) Utilities API

With a brand new utilities API, designers can now define custom classes, properties and values that can be directly accessible from the Bootstrap API. This is a welcome development as most Bootstrap designers power up most of their designs via Bootstrap source files. This approach takes Bootstrap-powered project to yet another level.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

5) CSS Variables

We all know CSS Variables is here to stay and with Bootstrap dropping support for IE, we can now take full advantage of CSS variables. Just to be clear, this was already available in v4, albeit a few root variables. This time, its extended fully across many components.

Take for example the .table component, the local variables can be styled easily like so:

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

Conclusion

Front-end development just got more exciting with the introduction of Bootstrap 5 and I believe many die-hard fans would want to switch back to their favourite CSS library of all time.

You might want to give it a try, you never know!