Bootstrap has been an essential tool for web developers over the years and has maintained a high standard. One of the most significant advantages of Bootstrap is that it is relatively easy to use and understand. The effectiveness of a thing, especially in this technological universe, does not mean that it is ultimate and perfect, and therefore immune to improvement. Everything can be improved upon, and that’s why despite the brilliance of Bootstrap 4, there is an upgraded Bootstrap 5, which has better code qualities. Some of these are; expanded color palette, CSS variables, faster and almost independent JavaScript (JS) integration, better API, and redesigned form controls and additional custom properties.
Another cherry on the top of this pile of news is that Vanilla JavaScript will be used from now onwards in place of jQuery as Bootstrap had stopped further support and approval of Internet Explorer 10 and 11. Apart from this, the only noticeable difference between Bootstrap 4 and 5 is that the logo had changed. The change is a little tweaking of the B in the logo. This article focuses on the new features of Bootstrap 5 and how to migrate from version 4 by paying special attention to the changes in the functionality. And an operational guideline of both the new and the old-keeping in mind is that the article deals solely with the available alpha version that might have changed upon the beta version release.
Bootstrap 5 Source Code
After downloading the zip files for the source code, which is the first of many things to be considered when migrating to Bootstrap 5, many files can be downloaded. But special attention is paid to the dust folder. This is because the folder contains the most important JavaScript and CSS files for the Bootstrap 5 to work.
Judging from the images above, it would be correct to have in mind that there are many files inside the zip. But in actuality and to save your time, you need just two of these files to be able to make a transition from version 4 to version 5 of Bootstrap. Two categories are depending on your choice. For the ordinary/unminified version, download the bootstrap.css and bootstrap.js files. But if you want the minified version, you would download the files bootstrap.min.css and bootstrap.min.js
Bootstrap 5 Installation
Installing Bootstrap 5 is an interesting exercise. One reason for this is that it could be done in various ways, and you have the chance to choose what suits your style. Modern development tools like npm or RubyGems could come handy when installing your Bootstrap 5. You could also simply download and install the files, or even via source code. You decide which is best for you according to your taste and need.
Source files: With your Sass and JavaScript help, you can choose to compile the code for Bootstrap 5. The version includes much technical ease of use materials like Sass Compiler and Autoprefixer to enhance CSS vendor prefixing.
CSS and JS: Armoured with an already compiled and minified JavaScript tplugins and CSS bundles, the Bootstrap 5 can be installed easily and smoothly by taking this option of compiled code.
Package managers: One of Bootstrap’s best features is that it gives you a list of package managers that are compatible for use, saving you the headache in the process. Package managers like RubyGems, NuGet, npm, yarn, and cComposer are important for the programmer for creating the exact conditions for your project to be executed in. You can complete your installation of Bootstrap 5 from any of them.
Bootstrap CDN: You can also attach the Content Delivery Network to your HTML file to use the new Bootstrap 5. This goes right in for those who wouldn’t want to have anything to do with already compiled JavaScript and CSS codes.
Browser Support
Talking of mobile support, the least versions supported are versions 6 and 7 for Android (on webview and browser) and iOS, respectively. Certain CSS properties are not totally functional with mobiles. Other than this, older versions of iOS and Android are not usable or compatible with the new version of Bootstrap.
Remembering that the Internet Explorer 10 and 11 had been dropped in Bootstrap 5 translated directly to the programmer who uses the earlier version of the Bootstrap framework, that there is a need to customize his or her support system to support the new version as the migration from version 4 to 5 takes place. Google Chrome and Mozilla Firefox are the supported browsers, together with the newly unveiled Microsoft Edge Browser. The Firefox also contains the latest ESR version. Other types of browsers are not supported, but there could be substitutes in some cases. Chromium, Chrome, and Firefox could be used in place of Linux. Official support is also not given to alternative browsers that use (either directly or otherwise) WebKit, Blink, and Gecko.
In addition to all these, the Bootstrap 5 is fully equipped with validators, which could help you fix bugs on your browsers. Validators are new functions that are actually CSS enabled browser hacks that help zone out browser versions and thereby deal with the bugs to enable better usage.
Global Changes
The world, through technology, is busy renewing itself and competing with itself. The old is constantly giving birth to the new. The differences between the old and the new are maybe not all too shocking, as there are mostly improvements in the functionality of old elements of the Bootstrap. However, there are still changes all the same. These changes that will be discussed onwards range from the form controls to the grid system, and the prospects they give are great, to begin with. These features are:
1. Better form controls
When using Bootstrap 4, there is a need to add a wrapper element .form-group to ensure that the resulting margin is exactly what you want. Although <select> elements like those with class .form-control have a width of 100%, together with form elements like the input, and textarea. This is the protocol to follow for the Bootstrap 4, to get the optimum output. It reads thus:
<form _lpchecked="1"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control focus-visible" id="exampleInputPassword1" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");" data-focus-visible-added=""> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
The problem with the .form-group class was that it is sometimes susceptible to fluctuations. The new version 5 removes this and in place of it make use of the grid system. It appears like this in outlook.
<form _lpchecked="1"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control focus-visible" id="exampleInputPassword1" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");" data-focus-visible-added=""> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
To perform the same function, the new Bootstrap 5 makes use of a simpler and more effective end to this end of form controls.
2. Better color palette
Another of the most glaring limitations of the Bootstrap 4 is that there is a limited color palette that can be used to customize your project into the desired look. Things like gradients, shadows, opacity, and others are tied to this. The whole kit for adding a theme to your work is not extensive. It can be done using Sass maps, Sass variables, and custom CSS.
Bootstrap 5 is different from the version 4 in this regard also. You wouldn’t need to toggle back and forth from your codebase to Sass and CSS. This is because, this time, the color palette has been built in. Not just that, the range of colors is extensive, leaving you with many options.
You can set your choice color, which is available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.
All these colors are available as a Sass map, $theme-colors.
The scss/_variables.scss file contains the color palette, which all appear as a Sass map.
$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );
3. Enhanced grid system
The grid class are complete with six defaults, that is: extra small (xs), small (sm), medium (md), large (LG), extra large (xl), extra extra large (xxl).
Earlier versions of the Bootstrap limiting in some areas. The breakpoints are improved upon to allow more than the static 1400px of the prior versions which is also in a 12column layout. This will enable those who are working with wider screens to take advantage and work more comfortably. If there is a need to target a screen bigger than the 1400px, the utility class takes care of it, the following code can be used:
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
4. Gutter classes
Between the columns of work are the paddings which are known as gutters. These are created by the horizontal padding. To add gutters at a specific breakpoint, there is need to set the padding, both right and left on each column and use a negative margin to trigger the desired start and end of each row. Breakpoint specific padding could help to align and space content in the grid system. This is not the case with the new version of Bootstrap as the gutter has been substituted with the g* utility. To control the horizontal width of the gutter, for example, you will make do with the .gx-* class.
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
The vertical width is controlled using .gy-*:
<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
5. Components and Layout Options
More layout options have been included in this version of the Bootstrap. One could not help but notice how this ‘coincides’ with the decision to drop the support for Internet Explorer 10 and 11. The .table class for example, can leverage the new local variables to make the styles easier by using the Sass.
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--bs-table-bg: #{$background};
--bs-table-striped-bg: #{$striped-bg};
--bs-table-striped-color: #{color-contrast($striped-bg)};
--bs-table-active-bg: #{$active-bg};
--bs-table-active-color: #{color-contrast($active-bg)};
--bs-table-hover-bg: #{$hover-bg};
--bs-table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}
6. JavaScript Support
Since three years ago, the development team of Bootstrap has hinted that sooner than later, they will drop the jQuery as a dependency. That’s no longer rumor or even news today, however. The jQuery had been dropped and now replaced with the vanilla JavaScript. The hopes are high about this. There are many improvements and tweaks to the existing structure and workings of the JS codes. However, there is particular attention to improving the code quality from version 4 to 5.
Toggle buttons which are powered by checkboxes and radio buttons are removed and replaced with a CSS only .btn-toggle class. The bulk plugin toggle has been discarded. And now there is no more need for the $().button('toggle') jQuery order again.
Let us take one example to know how the new JS looks on Bootstrap 5. The task before us is to add a modal, using both Bootstrap 5 and 4.
The jQuery library comes alive here when you try to write a dependency in your html. Check:
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
To perfect the function, this jQuery code needs to be inserted:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
To create similar effect in Bootstrap 5, the following procedure is to be taken. First you add the dependencies to the HTML without the jQuery library. Next, you add the modal mark-up.
<div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <wp-p>Modal body text goes here.</wp-p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Then you add this code to ascertain that the modal is displayed as at the appropriate time. This, when done appropriately, will work totally without the jQuery.
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
New Static Site Generator
To deploy a website which comes with easy to use tools and great performance development, the best option is to build a static website. Don’t sleep on that. Think Jekyll, think Hugo.
The framework that Bootstrap 4 provides synchronizes perfectly with Jekyll using the Sass. Jekyll requires that Ruby be installed before it can function, and it is so slow. For Bootstrap 5, however, the developers parked in the Hugo lot. This is because it is the opposite of Jekyll in this regard: fast, without external support and extensible static site generator. You might want to switch to Bootstrap 5, and of course, to Hugo. You need to follow these steps:
i. Run through the tools and install dependencies
ii. Run the command line as npm run docs-serve
iii. Open the http://localhost:9001/ in your browser.
For people who have no idea about how the Bootstrap framework works or how to operate it and those who don’t want to start their theme building from scratch, certain websites provide the templates for work very safe, exciting, and definitely advisable to use. Two of them are highlighted below:
1. Bootstrap Build: With over 20,000 subscribers and users, Free Bootstrap Builder provides a Sass compiler, free bootstrap themes, cloud database for saving files, among others. One thing to note is that the Bootstrap Builder is not yet worked out to create Bootstrap 5; rather, it creates Bootstrap version 4.5.0.
2. Startup: Startup is also an interesting Bootstrap builder with very easy and accessible to use. It has been designed to be used without difficulty by even those with no prior idea of how Bootstrap works. The key features are these: pre-coded and pre-designed elements that can be easily customized; it could be built without stress; it is compatible with mobiles and has various catalogs for design.
SVG Icon Library
SVG Icon Library: Cheers to the development team. Bootstrap now boasts of its icon library. Custom made and accessible to see, these icons can be exploited to perform all functions you can imagine for them. The Bootstrap 4 has none of these icons. Now the CSS can be used to style the icons without issues. And a bonus is that the icons are free to download and extend by any developer. They can be downloaded via the npm or even manually. If you’re going manual, you will need to download the zip file.
For npm, on the other hand, here is the code:
npm install bootstrap-icons
You can there and then insert the icon of your choice using the svg:
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"></path> </svg>
Expectations
In the future editions or even subsequent ones to the Bootstrap 5, there are much-awaited changes. However, there have been many changes already. Some of the things to expect are:
The usage of offcanvas menu performs some exciting actions when a user clicks certain icons on the menu. In addition to this, the integration of the RTLCSS is much anticipated. Also, among others, there is an expectation of improvement from the source codes, Sass module system, even CSS custom properties.
Without a single doubt, the Bootstrap 5 is a massive upgrade from the earlier editions but could be even better. The best advice you’ll get from here is that you have to try it out first hand. Make what you can of it and see how it can transform your project. Only then can you be able to appreciate the effort already invested into it and see where there is a need to do more.
