Strapping our boots on for Bootstrap 5
Late to the party but bootstrap 5 is here !!
For those of you who don’t know Bootstrap is a powerful toolkit — a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter.
Installation
The latest version of Bootstraps version is available here, the only other way to install Bootstrap is via the npm install.
npm install bootstrapgem install bootstrap -v 5.0.2
jQuery Removed
Bootstrap used jQuery behind the scenes until Bootstrap version 4, that means that for more than 8 years jQuery was there along for the ride. jQuery has become popular at this point, its a large and bloated framework , that requires sites using it to download and add trivial load time for a library that is only needed for Bootstrap alone. However from version 5 onwards it has been completely removed. With all the new modern frameworks working through the virtual Dom and no on the DOM directly which lead to faster performance its popularity has plummeted Although this change doesn’t affect the end-user, it still is a major change.
New Logo and Icons
Another huge change to Bootstrap version 5 is the introduction of a redesigned logo as well as several new icons which avoid the usage of an additional library. The doc design has been updated and they invested in adding more utilities to Bootstrap along with a new method of managing them across projects. In their own words, “it’s the Bootstrap we know and love, just slightly refined.”
XXL
Bootstrap version 5 also includes a new breakpoint. If your’e unfamiliar with what a breakpoint is, breakpoints are customizable widths determining how your responsive layout behaves across device and viewport sizes. XXL is our newest breakpoint and if you didn't catch it it stand for extra extra large. It’ll cover new dimensions of ≥1400px.
CSS Custom Properties
In previous versions, CSS custom properties were only included in a limited set of root variables for colors and fonts. But on Bootstrap 5, they are available in components and layout options as well.
Accordion
The .card accordion component has been replaced with a new .accordioncomponent. The new accordion still uses the Collapse JavaScript plugin internally, but with custom HTML and CSS to support it which makes it better and easier than ever to use.
Updated Forms
Bootstrap has now consolidated all their forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.
- Floating Labels
- Customizable appearance for checkbox
- New file input
Sources
