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.
- Faster and Easier
- Mobile First style
- It is free ! Available in www.getbootstap.com
- Brower support
- Responsive Design
Bootstrap 5 Beta 1 launched on 07 Dec 2020.
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)
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||Boostrap 4 Includes very limited colors.||Boostrap 5 comes with wide range of color palette.|
|Jquery||It has jquery and all related plugins.||switched to vanilla JS with some working plugins and Removed Jquery|
|Internet Explorer||Bootstrap 4 supports both IE 10 and 11.||No Support for IE 10 and 11.
Bootstrap 5 doesn’t support IE 10 and IE 11
|Buttons and 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|