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.

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.

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:

Global Changes

1. Switched from LESS to SASS for source CSS files.
2. 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.
3. Global font-size increased from 14px to 16px.
4. 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.

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

9.Navigation:

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:  

Conclusion:

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.