Difference between Bootstrap 4 and Bootstrap 5
What is Bootstrap?
It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc bootstrap helps to design the frontend.
Why Bootstrap?
- Faster and Easier
- Mobile First style
- It is free ! Available in www.getbootstap.com
- Brower support
- Responsive Design
Bootstrap 5 alpha launched in mid-June of 2020. As it is in alpha-1 version, in future some more features can be added in bootstrap 5
In alpha-1 version of bootstrap 5 some of the classes removed are:
- form – row
- form – inline
- list – inline
- card – deck
Some of added classes:
- gx-* (classes control the horizontal/column gutter width)
- gy-* (classes control the vertical/row gutter width)
- g-* (classes control the horizontal & vertical gutter width)
- rows-cols-auto
Difference between Bootstrap 4 and Bootstrap 5
| BASIS OF | BOOTSTRAP 4 | BOOTSTRAP 5 |
|---|---|---|
| Grid System | It has 5 tier (xs, sm, md, lg, xl). | It has 6 tier (xs, sm, md, lg, xl, xxl). |
| Color | It has limited colors. | Extra colors added with improved color palette. |
| Jquery | It has jquery and all related plugins. | Jquery is removed and switched to vanilla JS with some working plugins |
| Internet Explorer | Bootstrap 4 supports both IE 10 and 11. | Bootstrap 5 doesn’t support IE 10 and 11. |
| Form elements | Radio buttons, checkboxes have different look in different OS and browsers. | Whether it may be any OS or browsers, the look of form elements will not change. |
| Utilities API | We cannot modify utilities in bootstrap 4 | Bootstrap 5 gave freedom to modify and also create our own utility |
| Gutter | We use .glutter with fontsize in px | We use .g* with fontsize in rem |
| Vertical Classes | Columns can be positioned relative | Columns cannot be positioned relative |
| Bootstrap Icons | Bootstrap 4 doesn’t have its own SVG icons we have to font-awesome | Bootstrap 5 have its own SVG icons |
| Jumbotron | It supports. | It doesn’t support jumbotron. |
| Card deck | Card deck is used to create set of cards with equal width and height. | Card deck class in removed in bootstrap |
| Navbar | We have inline-block property and we will get white dropdown as default for dropdown-menu-dark class. | inline-block property is removed and we will get black dropdown as default for dropdown-menu-dark class. |
| Static Site Generator | Bootstrap 4 uses Jekyll software. | Bootstrap 5 uses Hugo software. |
