
There are two major improvements in Bootstrap 4.4.0, released 26 November 2019.
Responsive containers
If, like me, you've been annoyed with the fixed width of Bootstrap's container class below the xl breakpoint, then you will be pleased with the enw responsive containers.If you use container-{breakpoint} instead of container, the container will span 100% width up to the specified breakpoint.
Bootstrap documentation
Demo
Responsive .row-cols classes
There are now shortcut row-cols-* classes to specify how many columns should be shown per row.Looking at the following example, the row will contain two equal width columns at all breakpoints.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
You could specify a different number of columns per row at all breakpoints by changing to row-cols-* or specify columns for various breakpoints by using row-cols-{breakpoint}-*, for example:
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Bootstrap documentation (Grid)
Bootstrap documentation (Card)
These are the two changes that most people will want to know about, but there has also been other minor behind-the-scenes changes and bug fixes in 4.4.0. Check out the Bootstrap blog for full details.
Update: Just a couple of days later, the Bootstrap team released v4.4.1 as there was an issue when compiling with some Sass compilers.
Rate this post:
Comments
There are no comments yet. Be the first to leave a comment!