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 CSS and Bootstrap
- Difference between React.js and Bootstrap
- Difference between reactstrap and react-bootstrap
- Difference between Bootstrap and AngularJS
- Differences between Bootstrap and JQuery UI
- How to keep gap between columns using Bootstrap?
- Beginning BootStrap (Part-1) | Introduction and Installation
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- 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?
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.