<img alt="" src="https://secure.hiss3lark.com/167682.png" style="display:none;">
  • share

A blog about software development best practices, how-tos, and tips from practitioners.

What is Bootstrap in Programming?

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.

Evolution of Bootstrap

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.

 

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-

 

 

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:

 

Class

Screen width

.table-responsive-sm

< 576px

.table-responsive-md

< 768px

.table-responsive-lg

< 992px

.table-responsive-xl

< 1200px

 

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:  

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

 

 

Moving on

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.     

 

New call-to-action

Like what you just read? Get Latest content delivered straight to your inbox.