An Introduction to Bootstrap | Bootstrapping

21 Aug 2022

Beginner

5.5K Views

13 min read

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.

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
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.