An Introduction to Bootstrap | Bootstrapping

Satyaprakash Samantaray  Print   13 min read  
01 Mar 2019
 
Beginner
740

Bootstrap is the most popular front-end framework for building responsive websites. Bootstrap is an open source framework based on HTML, CSS, and JavaScript. In this article, you will learn about the Bootstrap version history and features and advantages.

What is Bootstrap?

Bootstrap is a mobile first front-end framework for easier web development with supporting all virtual devices. It uses HTML, CSS, JavaScript. Every browser can support bootstrap features. With the knowledge of HTML, CSS, and JavaScript anyone can start working with Bootstrap. Bootstrap responsive CSS adjusts to Desktops, Mobiles, and Tablets. It provides web-based customization. Bootstrap is open source. It can be used for mobile first design styles using the entire library instead of separate and different files.

There are 3 sub-folders. These are CSS, JS, and Fonts. Let’s check how does it look in Visual Studio.

You can get Bootstrap files in 2 ways.

  1. First, download the above files from the below link and then upload in your project and use it.

    http://getbootstrap.com/docs/3.3/getting-started/#download

  2. By using Bootstrap CDN links. No need to download these above files manually.

    https://www.bootstrapcdn.com/

For Bootstrap website code will be shown like this. Here I have added Bootstrap CSS and JS to make it responsive.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Article</title>
<meta name="viewport"content="width=device-width,initial-scale=1">
<link rel="stylesheet"type="text/css"href="~/Bootstrap-Files/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap Article</h1>
<script src="~/Bootstrap-Files/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Version History

The initial release of Bootstrap was on August 19, 2011. Bootstrap was developed by two employees Mark Otto and Jacob Thornton at Twitter.

History Of Bootstrap 1.x

The initial release of bootstrap v1.x was 1.0.0 and final release was 1.4.0 ;

  • It provided support for IE7 and IE8
  • It updated grid without .column or columns
  • It updates CSS selectors by removing unwanted tags
  • It updated grid by adding .one-third and .two-thirds columns
  • It provided support for HTML5 form selectors that is input
  • It updated grid column styles by removing the static .span1-16 classes
  • It has added Javascript plugins for modals, alerts, dropdowns, scrollspy, tabs, tooltips.
  • It has added Inline labels control for creating inline content
  • It supports media thumbnails and Breadcrumbs
  • It has added active states to all buttons, links, and inputs
  • It has added updates of javascript plugin for button states

History Of Bootstrap 2.x

The initial release of bootstrap v2.x was 2.0.0 and final release was 2.3.2 ;

  • The Progress bars are added in this version with striped and animated variation
  • New plugins are added like Collapse, Carousel, Typeahead
  • The new class .alert, .alert-block are used by replacing the old version
  • The new .thumbnail class is required for each thumbnail
  • The class .navbar is added for the navbar
  • The .form- prefix used in form classes standardization
  • The .btn- prefix used in classes for colors and sizes
  • The .table- prefix used in table classes standardization
  • The colspan and rowspan are updated with new support
  • The bootstrap-responsive.css is added as the compiled version
  • The data-attrs for tooltip are updated
  • The event type in dropdown is updated
  • The dropdown for firefox and mobile are updated
  • The .table-bordered and .table-striped are updated in tables
  • The utility classes like .text-center, and .text-right are used for typographic alignment.
  • The utility classes are used to display and hide content called print utility classes

History Of Bootstrap 3.x

The initial release of bootstrap v3.x was 3.3 and the final release was 3.4 ;

  • The positioning of checkboxes and radio buttons are improved by using position: relative
  • The duplication of tip() method in popover.js is erased
  • The isVertical parameter is updated in Tooltip.replaceArrow()
  • The memory leaking in tooltip plugins is solved
  • The <button> is updated to work with .list-group-items
  • In the modals, aria-hidden usage is removed
  • The carousel controls are updated to work in IE9
  • The padding on jumbotrons are adjusted inside containers
  • The hover border around active links is fixed in case of pagination
  • The .embed-responsive-* classes are updated with new features
  • The .row-no-gutters class is updated

History Of Bootstrap 4.x

The initial release of bootstrap v4.x was 4.0 and the final release in 2018-2019 is 4.2 ;

  • The spinner component is added for loading
  • The toast component is added for showing notifications
  • The utility class .text-decoration-none is added
  • The bootstrap-grid.css file updates the margin and padding of grid system
  • The .modal-xl class is used for modals
  • The .font-weight-lighter and .font-weight-bolder are added as utility classes
  • The validation styles for file inputs is added with new features
  • The print feature of dark tables is updated with new quality
  • The new utility class .dropdown-item-text is added for dropdown items
  • The Tooltips supports Shadow DOM
  • The double transitions issue on carousels is improved now

Bootstrap 3 vs Bootstrap 4

Bootstrap 4 is the latest version of Bootstrap. It is the most popular framework including HTML, CSS, and JavaScript. New components are added in Bootstrap 4. The final release in 2018-2019 is 4.2 ;

COMPONENTS
BOOTSTRAP v3
BOOTSTRAP v4
font size
The global font size is 14px
The global font size is 16px
primary CSS unit
The primary CSS unit is px
The primary CSS unit is rem
source CSS files
The source CSS files are named as LESS
The source CSS files are named as SCSS
grid system
It has 4 tier grid system(These are xs, sm, md, lg)
It has 5 tier grid system(These are xs, sm, md, lg, xl)
offset columns
It implements col-*-offset-* classes to offset columns
It uses offset-*-* classes to offset columns
inverse tables
The inverse table is not supported
Uses inverse tables by .table-dark
condensed tables
The .table-condensed is used for condensed tables
The .table-sm is used for condensed tables
contextual table classes
It doesn't contain .table- prefix for its contextual classes
It contains .table- prefix for its contextual classes
radio buttons
It uses .radio, .radio-inline to display radio buttons
It uses .form-check-input, .form-check-inline to display checkboxes
checkboxes
It uses .checkbox, .checkbox-inline to display checkboxes
It uses .form-check, .form-check-label to display radio buttons
input controls size
It uses .input-lg and .input-sm to customize the size of an input controls
It uses form-control-lg and .form-control-sm to customize the size of an input controls
label size
It doesn't contain any classes for changing form label size
It uses .col-form-label-sm and .col-form-label-lg to customize the size of a label
help text
It uses .help-block class to show help text
It uses the .form-text class to show help text
form legends
It has no classes for making the form legends
It uses .col-form-label on legend elements
validation styles
It contains validation styles for validating states on form controls(like .has-warning)
It doesn't contain validation styles
custom forms
It doesn't support custom forms
It supports custom forms
buttons
It contains .btn-default and .btn-info classes but .btn-secondary is not found
It contains the .btn-secondary, .btn-light, and .btn-dark classes
outline button
It doesn't contain the outline button
It supports .btn-outline-* classes for adding styles buttons using an outline colour
button sizes
It uses .btn-xs for button sizes
The .btn-sm and .btn-lg are used but .btn-xs class is no longer available
responsive images
It uses .img-responsive class for responsive images
It uses .img-fluid class for responsive images
image alignment
It uses .pull-right, .pull-left for right and left image alignment
It uses .pull-*-right and .pull-*-left for right and left image alignment
block level images
It uses .center-block to align block level images
It uses .m-x-auto to align block level images
Dropdown header
It uses li tags to build dropdowns with .dropdown-header
It uses to h1 - h2 tags to build dropdowns with .dropdown-header
Divider in dropdown
It uses .divider class to the li element to make lists of build dropdowns
It uses .divider class to the div element to make lists of build dropdowns
disable menu items
It uses the .disabled class to the li element to disable menu items
It uses .disabled class to the element to disable menu items
Nav inline
There is no .nav-inline class
It uses the .nav-inline class for specifying navs to be displayed inline
navbar alignment
It uses .navbar-right, .navbar-left for navbar alignment
It uses .mr-auto for navbar alignment
Fixed navbar
It uses .navbar-fixed-top and .navbar-fixed-bottom for setting navbar in top or bottom
It uses .fixed-top and .fixed-bottom for setting navbar in top or bottom
glyphicons
It supports glyphicons
It doesn’t support glyphicons
carousel item
It uses .item class for carousel item
It uses .carousel-item class
affix
It supports affix
It doesn’t support it
Thumbnails
It supports thumbnails
It doesn’t support it
Wells and Panels
It supports both
It doesn’t support it
cards
It doesn’t support it
It supports cards instead of affix, thumbnails, wells and panels

Bootstrap Advantages

  • Bootstrap supports the new release of all browsers.
  • It plays a vital role in case of responsiveness and cross-browser capabilities.
  • Bootstrap is very easy and quite simple to use for designing and development. It can be used with CSS, LESS or SaaS etc.
  • It can be customized as per the project requirements in an easy way.
  • Bootstrap supports Javascript Components like, tooltips, modal windows, alerts etc. to add functionalities easily.
  • Bootstrap is a framework which contains HTML elements like, tables, typography, buttons, forms, images, lists, and icons etc.
  • Bootstrap supports integration with ASP.NET MVC, ASP.NET Core, PHP, HTML, Angular, React.

Bootstrap Features

  • Bootstrap uses LESS files but also the old CSS files.
  • Using the responsive utility classes, the content can be shown only on devices depending on the size of the screen being used.
  • It provides pre-styled components like Button, Navigation, Progress Bar, Dropdowns etc
  • Bootstrap supports responsive 12-column grids, layouts, and components.
  • Every component, layouts are also very easy to customize.
  • The components are working with the JavaScript plugins bundled in the bootstrap package.
  • It provides documentation with examples that can make more easier to understand.
Summary

In this write-up, we have learned:

  • Introduction to Bootstrap
  • What is Bootstrap
  • Bootstrap version history
  • Bootstrap 3 vs Bootstrap 4
  • Bootstrap Advantages
  • Bootstrap Features

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview
+
+
Accept cookies and close this message