A couple of weeks back, the team again announced the first minor release of Bootstrap 5: v5.1.0. Throughout this article, we will be exploring what’s new in this first minor release, as well as how things work now compared to previous versions.
ICYMI, some of the notable changes differentiating Bootstrap 4 from the latest Bootstrap 5 include:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <title>Bootstrap App</title> </head> <body> <div> <!-- main content here --> </div> <!-- Bootstrap bundled JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
For more installation options, head over to the official download page.
This newer version of Bootstrap features an experimental option to enable a separate grid system that’s built on CSS Grid.
On previous versions of Bootstrap, under the hood, grid systems are built on top of the CSS
display: flex; property. This latest update in v5.1.0 can enable an option that lets you use the traditional CSS grid system (i.e., the
display: grid; property).
This feature is not enabled by default, as it is experimental. To enable it, you’ll need to first disable the default grid system by setting
$enable-grid-classes: false in your uncompiled Bootstrap Sass file, and finally, enable the new CSS Grid by setting
$enable-cssgrid: true, then you can recompile your Sass file.
Implementing this feature is pretty straightforward, all you need to do is:
For example, to create a two-column grid system, with equal width across all viewports:
<div class="grid"> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> </div>
And for responsiveness, Bootstrap utility classes for different viewports and devices (
xs, sm, md, lg, xl) are still supported:
<div class="grid"> <div class="g-col-4 g-col-md-6">..</div> <div class="g-col-4 g-col-md-6">..</div> <div class="g-col-4 g-col-md-6">..</div> </div>
Bootstrap 5.1.0 introduces the new and exciting placeholder components (also known as skeleton loaders), which are temporary gray blocks that are used to depict the structure of a block before its contents are loaded.
You can easily create placeholders by adding the
.placeholder class to a specific element you want to display as a placeholder:
<h1 class="placeholder col-4"></h1> <p class="placeholder col-6"></p> <button class="col-3 btn btn-primary disabled placeholder" style="height: 40px" ></button>
Which produces the output below:
The placeholder width can be adjusted by using Bootstrap grid column classes (like in the example above), width utilities (w-50, w-75), or inline styles.
By default, the size of placeholders is based on the typographic style or content of the parent element. However, we can customize its size using the inbuilt sizing modifiers utility classes:
You can also add animations to the placeholder to give the user a better understanding that something is being actively loaded. Currently, there are only two supported classes for animating placeholders:
Below is an example:
<p class="placeholder-glow"> <span class="placeholder col-4"></span> </p> <p class="placeholder-wave"> <span class="placeholder col-4"></span> </p>
For a while now, only vertical collapse is supported in Bootstrap, but in this latest version, the team has added support for horizontal collapse.
If you’d worked with the Bootstrap collapse in the past, all you need to get horizontal collapse working is to add the
.collapse-horizontal modifier class to your collapsible element, and this new class will transition the width (rather than the height) of this element when you toggle your collapse.
Below is a code sample:
<p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#horizontalCollapseExample" aria-expanded="false" aria-controls="horizontalCollapseExample" > Toggle Horizontal Collapse </button> </p> <div style="min-height: 120px"> <div class="collapse collapse-horizontal" id="horizontalCollapseExample"> <div class="card card-body" style="width: 300px"> Placeholder content here, this is hidden by default. </div> </div> </div>
And when we run this, we have the following output:
.bg-opacity-* classes have also been introduced to easily adjust text, and background elements’ opacity. Although, before you can get this new utility class to work, the element (depending on the property you want to adjust) must have a prior
.bg-* utility class.
<div class="text-success">Default success text</div> <div class="text-success text-opacity-75">75% opacity success text</div> <div class="text-success text-opacity-50">50% opacity success text</div> <div class="text-success text-opacity-25">25% opacity success text</div>
This will produce:
<div class="bg-danger p-2 text-white">Default danger background</div> <div class="bg-danger p-2 text-white bg-opacity-75"> 75% opacity danger background </div> <div class="bg-danger p-2 text-dark bg-opacity-50"> 50% opacity danger background </div> <div class="bg-danger p-2 text-dark bg-opacity-25"> 25% opacity danger background </div> <div class="bg-danger p-2 text-dark bg-opacity-10"> 10% opacity danger background </div>
This will produce:
In this latest minor release, the
:root variables have been updated to include a new gray color palette and new RGB color theme variables. Additionally, CSS variables now control the
<body> tag along with some other tags and custom utility classes. This will make customizing and extending default Bootstrap styles way easier.
Throughout this post, we covered some of the new changes that were introduced in Bootstrap 5.1.0, the first minor release for Bootstrap 5. We also looked into the changes differentiating Bootstrap v4 from v5, as well as how to get started with using the new Bootstrap 5.1.0.
For a full reference of all the new changes, check out Bootstrap creator Mark Otto’s official announcement.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.
We spoke with Dom about his approach to balancing innovation with handling tech debt and to learn how he stays current with technology.
Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.