Twitter developed Bootstrap in 2011 and got released in Github in the same year.Bootstrap is a free open source front-end-framework to develop faster,easier,responsive web pages, and mobile-first websites. Bootstrap is the most popular framework for its compatibility with all modern browsers like Firefox, Chrome, Opera, Safari, Edge, etc.
Bootstrap has pre-defined classes that make a developer’s job easy. However, a basic understanding of HTML & CSS is required to work with Bootstrap. You can make responsive designs for different devices with Bootstrap. It contains various HTML & CSS based design templates especially for typography, buttons, tables, forms, models, navigation, image carousels as well as optional JavaScript plugins.
Since its inception in 2011, Bootstrap has come a long way with four versions till date. The following infographic shows the evolution of this technology.
In the year of 2013, Bootstrap 3 was launched and Bootstrap 4 was released in august 2017.Let’s look at the global changes and technical updates over these versions:
SASS is more powerful than LESS. SASS has functionalities like logical operators, loops, mixing, em, rem nested media queries, extend, and much more.
SASS has a lot of compiling options to CSS. Therefore, it’s become easy for Bootstrap developers.
The best rule of typography is to use the relative units of rem (root em), em (measurement unit of fonts), and px (quantity of length equal to the pixel in an unscaled HTML). Bootstrap 4 uses rem which is more flexible in comparison to px. With rem,
You can also scale elements up and down without getting stuck with a fixed size. This makes the design easier to adjust during development by making the content device responsive.
Bootstrap3 has 4 grid classes (col-xs-3, col-sm-3, col-md-3, col-lg-3), while version 4 has 5 grid classes (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3).
Bootstrap 4 has detached 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 |
Small ≥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- |
Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+. For sites needing either of those, use v3.
In Bootstrap 4, new utility classes have been included without hampering any existing functionality, whatsoever. Such important additions are as that of responsive text alignment classes, responsive floats, and responsive embedding. Apart from offering many shortcuts, these, respectively, allow for changing the alignment of the text, floating of the elements and the scaling of the aspect ratio of any embedded media.
(E.G.:.hidden-md-up hides an element on medium, large, and extra-large viewports. Now, instead of .hidden-md-up, use .d-md-none).
Bootstrap 4 table is fully responsive to its class (table-responsive) to allow horizontal scrolling of the tables on mobile devices, it’s comfortable with any screen size desktop, tab, or mobile.
Responsive tables no longer require a wrapping element. In simple words, in Bootstrap 3, .table-responsive class should be added to the parent <div>. But in Bootstrap 4 , .table-responsive class to be added to <table> element.
Added a new .table-inverse option.
Added table header modifiers: .thead-default and..thead-inverse
Renamed contextual classes to have a .table--prefix. Hence,.active .success, .warning, .danger and .table-info to .table-active, .table-success, .table-warning, .table-danger and .table-info.
You can decide when the table should get a scrollbar, depending on screen width:
|
Class |
Screen width |
|
.table-responsive-sm |
< 576px |
|
.table-responsive-md |
< 768px |
|
.table-responsive-lg |
< 992px |
|
.table-responsive-xl |
< 1200px |
Bootstrap 4 popover is similar to tooltips it is a pop-up box that appears when the user clicks on any element, the difference is that popover can contain much more content to show.
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Renamed .img-responsive to .img-fluid.
Renamed .img-rounded to .rounded.
Renamed .img-circle to .rounded-circle
In Bootstrap 4, Navigation component has been simplified to a great extent. One is required to create a new list of elements employing the latest nav base class. There are some recent additions like nav-link class, nav-item class, and navigation bar styles also.
Rewrote component with flexbox.
.navbar-default is now .navbar-light, though .navbar-dark remains the same. However, these classes no longer set background-colors; instead they essentially only affect color.
.navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
Navbars no longer include margin-bottom or border-radius by default.
Bootstrap 4 moved to flexbox. This can be considered as one of the biggest and significant achievements of this version. This will provide the following benefits:
We are comparing the technical components between Bootstrap 3 and Bootstrap 4 in the following table:
|
Component |
Bootstrap 3 |
Bootstrap 4 |
|
Source CSS Files |
LESS |
SASS |
|
Primary CSS Unit; Global Font Size |
Px | 14 px |
Rem | 16 px |
|
Media Queries Unit |
px |
px |
|
Default Fonts |
Helvetica Neue, Helvetica, Arial, sans-serif |
Uses a "native font stack" (user's system font),with a fallback to Helvetica Neue, Arial, and sans-serif |
|
Grid Tiers |
4 tier grid system (xs, sm, md, lg) |
5 tier grid system (xs, sm, md, lg, xl) |
|
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 |
|
Dark/inverse Tables |
Not supported |
Added dark/inverse tables with the .table-dark class |
|
Responsive Images |
Use .img-responsive class |
Use .img-fluid class. |
|
Image Alignment |
Use .pull-right, .pull-left, and .center-block helper classes. |
Uses .m-x-auto instead of .center-block to align block-level images. Can use the various .pull-*- noneclasses to disable floating. Also supports Bootstrap 3 components. |
|
Glyphicons |
Supported |
Not Supported |
|
Progress Bars |
Doesn’t use the progress for progress bars. Instead, applies progress bar classes to nested div elements. |
Using the progress element was abandoned in Alpha 6. Bootstrap 4 now uses the div element again. |
|
Default Pagination |
.pagination needs to be added to <ul> element |
.page-item must be added to to each <li> element and .page-link to each <a> element |
|
Responsive Tables |
.table-responsive class should be added to parent <div> element |
.table-responsive class to be added to <table> element |
|
Navbar Alignment |
Employ .navbar-right, .navbar-left to align components |
Employ spacing utilities such as .mr-auto, or flexbox alignment utilities |
Bootstrap has been the most popular front end CSS framework with responsive design. With every version, it brings forth more user-friendly features. Originally known as Twitter Blueprint, Bootstrap brought revolution to the front end environment. The upcoming version of the framework is Bootstrap 5 which will have dropping support for IE10. It’s shifting the testing infrastructure from QUNIT to Jasmine.