Version 5.1 of the CSS framework Bootstrap is the first minor release for the still young 5-branch. In addition to experimental support for CSS-Grid, the update also brings off-canvas components within the navigation bar as well as a new placeholder component and much more.
CSS-Grid löst Standard-Grid ab
The development team behind Bootstrap introduces experimental support for CSS-Grid with the update and thus separates from the previous standard. Developers can use $enable-grid-classes: false disable the default setting to override the new CSS grid $enable-cssgrid: true to activate. further information can be found in the documentation.
Bootstrap 5.0 introduced new off-canvas components with which developers can, among other things, incorporate invisible sidebars for navigating a project or shopping carts in websites. In version 5.1, the responsible development team has the .navbar-expand-*-Classes extended to offer support for offcanvas also within the navigation bar.
New placeholder components and CSS variables
In terms of components, something has also changed: the new Placeholders feature offers developers the option of providing temporary blocks instead of real content to indicate that something is currently being loaded on the website or in the application. The blog post shows the source code for an example with a lit placeholder for loading processes. The first update provides both HTML and CSS code for implementation – developers can add individually required code.
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>Bootstrap 5.1 also has other CSS variables (:root) in the luggage: In addition to additional gray tones, the update introduces new ones <body>– and RGB variables. The grayscale should complement the existing color and theme color variables and complete the existing set of globally available CSS colors.
Further information on Bootstrap 5.1 can be found in the Post on the official blog on the CSS framework.
(mdo)
