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 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)
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.|
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between Bootstrap and AngularJS
- Difference Between CSS and Bootstrap
- Differences between Bootstrap and JQuery UI
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- Bootstrap | Badges and Breadcrumbs
- Displaying inline and multiline blocks of code using Bootstrap
- Colors and gradients in bootstrap with examples
- How to change the width and height of Twitter Bootstrap's tooltips?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- How to get the same behavior with confirm and bootstrap modal?
- .pull-left and .pull-right classes in Bootstrap 4
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to use Bootstrap modal for YouTube videos and play automatically ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.