Bootstrap is a free and open-source CSS framework designed for responsive and mobile-first web development. It has a giant collection of reusable templates for forms, buttons, navigation, typography, and other interface components written in HTML, CSS, and JavaScript. Bootstrap enables both designers and developers to quickly build decent-looking and fully responsive websites.
The first alpha version of Bootstrap 5 was released on 16th June 2020. This version of Bootstrap no longer depended on jQuery and it dropped support for Internet Explorer. As version 5 was still in alpha, there were a lot of breaking changes.
The release of the first stable version of Bootstrap 5 was on 5th May 2021. It fulfilled its promise of CSS variables, faster JavaScript, better APIs, and fewer dependencies. Head to https://getbootstrap.com/ to explore the new changes.
Bootstrap 5 brings us many changes, including several improvements and new features. Here are some Bootstrap 5 highlights to take note of:
Highlights of Bootstrap 5
Custom CSS Properties
By dropping support for Internet Explorer (IE), Bootstrap 5 can now use custom CSS properties. These properties make CSS more flexible and programmable.
To prevent conflict with other third-party CSS, the custom CSS variables have been prefixed with -bs. There are two types of variables: root and component variables.
Root variables can be accessed wherever Bootstrap CSS has been loaded. These variables are located in the _root.scss file and is included in the compiled dist files.
:root {
--bs-blue: #0d6efd;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}Component variables are local variables for various components. They help reduce the compiled CSS. Help avoid accidental inheritance of styles in components like nested tables. Allows the restyling and extension of Bootstrap components after Sass compilation.
Read more about Bootstrap 5’s custom CSS variables here.
Improved Forms
Bootstrap has improved its form controls, input groups, and more. They have resigned all of their form controls to be fully custom. They all have the same look and behaviour across different browsers.
The new form controls no longer contain unnecessary colourful markup, but instead focus on the standard and logical design features.
They also introduced a separate, dedicated section for Forms documentation and components.
Better Grid System
Bootstrap’s grid system can adapt across all six default breakpoints and any other custom ones. The default grid tiers are: Extra small (xs), Small (s), Medium (md), Large (lg), Extra large (xl), and Extra extra-large (xxl). Each of these has its own container, modifiers, and unique class prefix.
Here is how the grid changes with each breakpoint:
Bootstrap 5 builds upon the existing system, rather than creating a new one. Some of the changes made are:
- The gutter class (.gutter) has been replaced with a utility (.g*); similar to margin and padding. Change vertical gutters with .gy-*, horizontal gutters with .gx-* classes, or all gutters with .g-* classes. .g-0 is also available to remove gutters.
- The default position property of columns are not relative anymore
- Vertical spacing classes have also been included
New Utilities API
Utilities are becoming popular in the development community and the Bootstrap team has taken notice. Bootstrap 5 comes with a brand new Utilities API. In addition to that, there is a new language and syntax in Sass.
The new Utilities library will give developers the power to create new utilities while still being able to modify or remove the defaults given. For example, you will be able to easily expand the number of margins (m-*), padding (p-*) classes, and so on without needing to write custom Sass code to expand them.
Read more about the Utilities API here.
New Custom SVG Icon Library
In the past, Bootstrap 3 was using Glyphicons icons. It was a library of 250 reusable icons. However, with Bootstrap 4 it was removed. Which made web developers seek other free icons for their projects.
Bootstrap 5 introduces a brand new open-source SVG icon library consisting of over 1300 icons. These icons are quickly scaled, customized with CSS, and be used in many ways. These icons were carefully and specifically created for Bootstrap by Mark Otto, co-founder of Bootstrap.
Improved Documentation
Documentation has been enhanced with more information especially when it comes to customisation. There is a whole new section for Customisation which you can use to learn how to customise the framework.
Additionally, Bootstrap 5 now comes with a new look and feel, and with better customization. There is now more flexibility to customise your themes so that not every site or app will look the same.
Expanded Colour Palette
The colour palette is bigger in version 5. It offers a more extensive and beautiful inbuilt colour palette. The look and feel of your website or app can be easily customised, without needing to leave the codebase. More work has also been done to improve the colour contrast.
Conclusion
With all these new features and changes, Bootstrap 5 is becoming a great CSS framework for developers to use. Its simple to use, lightweight, fast, responsive, useful, and it will make your websites and apps look good.
You can go to the Bootstrap 5 official download page if you wish to install it and give it a try.