Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used for design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript.
In the year of 2013, Bootstrap 3 was launched and then August 2017 saw Bootstrap 4 release.
We use Bootstrap because of many reasons that are: Responsive design, Browser support, Mobile First Style and Easy to learn.
Different Version of Bootstrap:
Version 2.0 supports responsive web design
Version 3.0 supports mobile-first design
Version 4.0 introduces SASS and Flexbox support
CSS source file update from LESS to SASS
SASS is more powerful than LESS. SASS has functionality like logical operators, loops, mixing, em, rem, nested media queries, extend, and much more.
LESS was easy to learn, and it makes for a quick step-up to SASS. So, it seems like the time to get comfortable with SASS is now.
Font size update from px to rem
The best practice of typography on the web is to use the relative units of rem, em, and px. Bootstrap 4 uses rem. It will more flexible in comparison to px. With rem, you can scale elements up and down without getting stuck with a fixed size. This makes the design easier to adjust during development making the content device responsive.
Major Difference between Bootstrap 3 and Bootstrap 4:
|
Component |
Bootstrap 3 |
Bootstrap 4 |
|
Lable Pill |
.lable-pill is not available. |
.label-pill class for making the corner round. |
|
Pager |
It uses .next or .previous. |
In which we use .pager-next or .pager-previous. |
|
Offsetting Columns |
Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4 |
Uses offset-*-* classes to offset columns. For example, offset-md-4 |
|
Primary Unit |
px |
rem |
|
Jumbotron |
.jumbotron-fluid class is not required on full-width. |
.jumbotron-fluid class for full-width jumbotron. |
|
Grid System |
4 tier grid system (xs, sm, md, lg) |
5 tier grid system (xs, sm, md, lg, xl) |
|
Structure |
For applying dropdown list, we use <ul>, <li> |
For applying .dropdown-item we use <a>, <button>. |
|
Button Size |
.btn-xs class is supported. |
In which their is only .btn-sm and .btn-lg is available. |
|
Inverse Table |
Not supported. |
In which we can add inverse table with the help of .table-inverse class. |
|
Responsive Table |
In Bootstrap 3, .responsive-table class added to <div> element. |
In bootstrap 4, .responsive-table class added using <table> element. |
|
Font Size |
14px |
16px |
|
Source CSS Files |
LESS |
SCSS |
|
Horizontal Form |
.row class is not required using grid in forms. |
.row class is required when using grid in form. |
|
Color |
Limited colors are available it support inverse navbars but not other classes. |
There are many colors option .bg-dass or .navbar-light, .navbar-dark classes. |
|
Condensed Table |
It support .table-condensed. |
It support .table-sm. |
|
Dividers |
Apply .divider class to <li> element. |
Apply .dropdown-divider class to <div> element. |
|
Carousel Item |
It uses .item class. |
It uses .carousel-item class. |
|
Flexbox |
No |
Yes |
|
Afflix |
Yes |
No |
|
Class |
Use .breadcrumb class against the <ul> tag. |
Use .breadcrumb class against the <li> tag. |
Grid System Updated
Bootstrap 4 has removed the xs from the lowest breakpoint. While in Bootstrap 3 the lower point works with xs (.col-xs) but now in Bootstrap 4 it has been removed and used only (.col-) for a lower breakpoint.
|
Grid Size |
Extra small (<576px) |
Samll (≥576px) |
Medium(≥768px) |
Large(≥992px) |
Extra Large(≥1200px) |
|
Max Container Width |
None (Auto) |
540px |
720px |
960px |
1140px |
|
Class prefix |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl |