At the end of November 2019, the Bootstrap team released a new version which contained some very notable updates. This post will highlight some of these updates and how they can help you in your projects.
New Responsive Containers
You can now create responsive containers using one of these classes .container-(sm, md, lg, xl)
This can be really helpful on web applications that need to use 100% of the viewport on mobile but then become contained on desktops.
New Responsive Row Classes
Instead of adding your responsive classes on each individual columns, you can now declare your responsive grid on the row. This makes building responsive card decks and dynamic blog listings a breeze.
|
1 |
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5"> |
New Bootstrap SVG Icons
Bootstrap 3 contained a subset of an icon library called glyphicons. Bootstrap 4 removed these and caused many people to find an alternative such as FontAwesome or Feather Icons. Bootstrap has just recently an Alpha version of their own icon library. It can now again be a one stop shopping experience. I am really excited about this new addition to the project. Personally, I felt FontAwesome got too complicated and I hope Bootstrap Icons retain their simplistic approach to usage.
I created this Bootstrap Icons cheat sheet to make it easier to grab the SVG code.
4.4.1 Update
This update fixed some Sass compiler issues, so nothing really changed with the classes or usage of the library.
Summary
As you can see the Bootstrap Team has taken great strides in listening and improving the library. I updated my Bootstrap 4 Cheat Sheet with these new classes so you can reference them and the other classes on your next project.
