 |
VOOZH | about |
|
VOOZH | about |
The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
Earlier this year, the Bootstrap team announced a major release: Bootstrap v5, which was shipped with some interesting changes such as the migration from jQuery to vanilla JavaScript, tons of updated components, and other updated utility classes.
👁 What's new in Bootstrap 5.1.0A 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:
If you are not already familiar with the installation process, you can start using Bootstrap by including its minified CSS and JavaScript CDN in your markup like below:
<!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:
.row with .grid .col-* classes with .g-col-* classesFor 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.
This new component is a game-changer, as it helps to enhance the experience of your application, plus it is built with only HTML and CSS, (i.e., you don’t need any JavaScript code to get started in integrating them, although you’ll still need to write some custom JavaScript code to toggle the visibility of its contents).
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:
👁 Placeholder Component Bootstrap
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: .placeholder-lg, .placeholder-sm, or .placeholder-xs.
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: .placeholder-glow and .placeholder-wave.
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>
👁 Placeholder Component Animation Bootstrap
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:
👁 Horizontal Collapse Bootstrap
bg-* and .text-*)Newer .text-opacity-* and .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 .text-* or .bg-* utility class.
text-opacity example<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:
bg-opacity example<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:
👁 Background Opacity Bootstrap
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 Dashboard Free Trial BannerLogRocket lets you replay user sessions, eliminating guesswork around why bugs happen by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.
LogRocket's Galileo AI watches sessions for you, instantly identifying and explaining user struggles with automated monitoring of your entire product experience.
Modernize how you debug web and mobile apps — start monitoring for free.
Learn how to use Gemini CLI subagents to delegate frontend, backend, testing, and docs tasks to specialized agents with guardrails and clear ownership.
Learn how next-browser gives AI agents runtime context for debugging Next.js apps, including React props, hydration, PPR, forms, and performance.
Build dynamic LLM routing in Next.js with OpenRouter, TanStack AI, task classification, model fallbacks, and cost-aware routing.
TSRX adds first-class control flow, conditional hooks, and scoped styles to React via a TypeScript compiler extension — no new framework required.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
