As we all know bootstrap is one of the most popular front end development platform and each version comes with a new feature and update.
Bootstrap 5 launch with a major change; it may change the whole way of design. let’s take a look of new feature:
jQuery is removed
one of the major change in bootstrap 5 is removing jQuery. jQuery is a fast, small and feature-rich JS library. It makes thing like HTML document traversal and manipulation even handling animation of ajax much similar with an easy-to-use API that works across a multitude of browsers. However, with the trend of the single-page app with react, angular, Vue jQuery is not popular anymore. So, bootstrap 5 completely remove jQuery.
Rewrite a documentation Jekyll to Hugo
Jekyll is one of the oldest static site generators and it’s dropped in Bootstrap v5. In the latest version, they implement one of the fastest static site generators Hugo. Bootstrap team has made change their dependency to support this move, and implement major change.
Enhanced grid system
In bootstrap 5 grid system is completely different. We have modified the existing grid system instead of replacing it with a completely new.
Here are some of the major changes in the Grid system.
Added a new grid tier.
.gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. It also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
Form layout options have been replaced with the new grid system.
Vertical spacing classes have been added.
Columns are no longer position: relative by default.
Dropdown
Dropdown is improved in latest version and changed in both our JavaScript and popper.js. The new version modified dropdown plugin to add a new data attribute to help separate our own positioning styles with that of Popper’s. The issues we saw—like a .dropstart menu overlapping a button or an incorrect responsive .dropdown-menu-end class—were largely the result of competing positioning.
Now when dropdown menus have data-bs-display="static", we’ll add data-bs-popper="static" via JavaScript to their associated .dropdown-menu. When dropdowns are in our navbars, their menus will have data-bs-popper="none" added. This separates two different positioning libraries, ours and Poppers, and ensures all behaviours are supported.
In addition, we’ve removed the initial margins from dropdowns and popovers, instead of relying on Popper’s offsets. These also conflicted with the default styling for elements positioned by Popper.js. Relatedly, there was a bug in how popover arrows were aligned that has now been resolved.
Color utility docs
In bootstrap 5 overhauled our color utility documentation, separating the text color classes from our background-color ones.
We’ve also made extensive use of our scss-docs shortcode to include tons more code snippets in our docs.
Text color utilities remain on their existing page.
Background utilities have moved to a new page.
Both pages now include a new Sass section, showing relevant
snippets of our source code that are related to each set of utilities. We list all our available color variables, our theme color variables and maps, associated mixins and loops, and even where these utilities are generated in the utility’s API.
Js updates
Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
Restored the offset option for dropdowns.
Fixed modal toggling when clicking on data-bs-toggle="modal".
We now build our base component as a separate .js file.
We now prevent getSelector from returning URLs as selector which
caused errors in dropdown and scrollspy plugins.
Refactored components to use a utility function to define jQuery plugins
Navbars
Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It’s customizable via Sass and a CSS variable.
We’ve re-added flex-grow to the .navbar-collapse to restore the flexbox behaviours from v4 and prevent some content from being inadvertently squished.
Forms
Removed vertical-align from .form-select
Form validation mixin updated with additional parameters
Fixed validation icon placement in .form-select
Checkboxes and radio buttons are aligned better in input groups
Here, are some of the admin templates for create a bootstrap project:
Dashboardkit
Dashboardkit.io is built using the Bootstrap 5 template set a version which is perfect for novice developers, designers, project managers, and owners. It is made by Elite Author. We will be taking a more detailed look at Dashboardkit.
Features
• 200+ pages
• 6+ landing page
• High performance
• Free update and support
• SEO Optimized
Able pro
Able pro is a stunning and fully responsive bootstrap admin template. It contains a ready-to-use feature package and provides a flexible solution to every problem. Able pro comes with easy to switch light-dark layout and set of components for the unlimited creativity of the user.
Feature
• 11+ menu option
• 100+ external plug-in
• Live customizer
• Easy navigation
• Useful animation
Datta able
Datta is one of the most used Bootstrap admin dashboard templates having an excellent support system and browser compatibility. It is free for single-use, but you have to pay a certain charge for multiple usages. The user doesn’t need any documentation for installing.
Feature
• 130+ pages and 30+ layout
• Flexible code
• High performance
• Video tutorial
• Complete UI Kit
Nextro able
Nextro able Built using the latest Bootstrap Framework & support of NPM-Gulp build process for enhancing web developing experience. It contains all features and elements to create a simple to complex web application or project. A template Design passed with good score in Google Page Speed, Pingdom, GT Metrix, and code passed via w3 validators.
Feature
• Light/dark/semi-dark version
• Compressive layout
• Advance components + pages
• Highly flexible code
• SEO optimized
Gradient Able
Gradient Able Bootstrap 4 Admin Template is a complete solution for your dashboard creation. It comes with the default layout version, with limited options, Google optimized, font integration, high speed, mature and sophisticated, extremely well-organized code makes Gradient Able Lite a completely flexible solution for any type of back-end application project.
Feature
• Flexible
• No coding skill required
• Easy to customize
• Google font option
• Responsive
Top comments (0)