Bootstrap 5 Alpha - How to Get Started using Bootstrap 5

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at the new features of Bootstrap 5 and how to get started using it.

New Look and Feel

Bootstrap 5 gives us a new look and feel that’s different from version 4.5.0.

Internet Explorer support is removed so that the package is now smaller.

Font sizes are now responsive rather than fixed sized.

Card decks are removed.

Navbar now requires less markup to add.

It’s no longer display as an inline-block element by default.

There’s also a new custom SVG icon library included with many icons.

jQuery is removed as a dependency for Bootstrap since JavaScrtipt can provide the same functionality without the extra dependency.

Now that we don’t need it, that’s one less dependency that we’ve to include in our app.

The button plugin is now CSS only.

Bootstrap now uses CSS custom properties for styling.

This allows Bootstrap to reuse values for styling.

The grid system has improved.

Bootstrap 5 has a new grid tier, which is the xxl tier.

This is now the smallest breakpoint.

.gutter classes have been replaced with the .g* utiulities for gutter spacing.

Form layout options are replaced with a new grid system.

Vertical spacing classes are added.

Columns are no longer position: relative by default.

To define new gutters, we can write:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

We have the g-5 class for defining a butter,

#bootstrap #css #javascript #developer