What is Bootstrap in Programming?
What is Bootstrap
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.
Evolution of Bootstrap
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.
Bootstrap 3 Vs Bootstrap 4
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:
- Switched from LESS to SASS for source CSS files.
- Switched from px – rem as Bootstrap’s primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.
- Global font-size increased from 14px to 16px.
- Added a new grid tier for ~480px and below.
1. CSS source file update from LESS to SASS
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.
2. Font size update from px to rem
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.
3. Grid System Updated
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|
4. Browser Support:
Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+. For sites needing either of those, use v3.
5. Utility classes:
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).
6. Responsive tables
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:
7. Uses of popover and tooltip
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>
8. Rename classes for image
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.
10. Flexbox based Grid Added
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:
- Flexbox based grid
- New XLl grid tier
- Latest auto-layout grid
- Navbar customization options
- New Spacing utilities
- Sans Glyphicons configuration (Bloat-free zone)
- Responsive sizing
- Responsive Floats
- Auto Margins
- Vertical Centering
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.|
|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.