Bootstrap Tutorial | Bootstrap 5 Vs 4 Vs 3

What is Bootstrap?

Bootstrap or ( Twitter Bootstrap ) is HTML5 based Mobile First Front-End Framework for Web designing and UI Development. Bootstrap use HTML, CSS, and Javascript. Bootstrap was developed by Twitter Developers in August 2011. It is open source and easy to use.

Bootstrap is among Top Frontend Frameworks used world wide.

Why Bootstrap?

		     HTML5 based, used html5 doctype and tags.
 Mobile First Approach , No need to write separate css for mobile devices.
 Open Source , No need to buy license even.
 Browser Support , Support all major browsers.
 Responsive , single framework for all devices.
	
         

Bootstrap Versions

Bootstrap first version was bootstrap 1.0.0. The next version was Bootstrap 2 and and then Bootstrap 3, then Bootstrap 4, and the latest version of bootstrap is Bootstrap 5.

Bootstrap 5 was released on 07-Dec-2020. Bootstrap 4 was released on 07-Jan-2018. Here is Difference between Bootstrap 5, Bootstrap 4 and Bootstrap 3.

Bootstrap 5 vs Bootstrap 4 Vs Bootstrap 3
Bootstrap 5	Bootstrap 4	Bootstrap 3
No support for I.E	No support for I.E 8 and 9 only	Support Internet Explorer 8 and 9
Separate both Portrait and Landscape mode on Smartphones.	Separate both Portrait and Landscape mode on Smartphones.	Both Portrait and Landscape mode looks identical.
Container size 1320px	Container Size 1140px	Container Size 1170px
Six Class prefixes, i.e col-xxl, col-xl, col-lg-, col-md- , col-sm-, col- .	Five Class prefixes, i.e col-xl, col-lg- , col-md- , col-sm-, col- .	Four Class prefixes, i.e col-lg- , col-md- , col-sm-, col-xs .
Use CSS Flexbox, CSS functions and variables	Use CSS Flexbox.	Use CSS Float and Clear
Only responsive layout .	Only responsive layout .	Non responsive layout option .
Use better Cards	Use Cards instead of wells and panels.	No Cards
Inverse Table Option.	Inverse Table Option.	No option for inverse Table

For IE, use Bootstrap 4 (IE 10 and 11 only).

For I.E 8 and 9 support, use bootstrap 3. Bootstrap 4 supports IE 10 and above only.

Download Bootstrap Bundle Pack

Bootstrap can be easily downloaded from official site getbootstrap.com . You can also customize bootstrap components and javascript and then download.

Download Bootstrap 3 Download Bootstrap 4 Download Bootstrap 5

Once downloaded, just unzip it and you will see following files/directory. Just include all with your html page start working on your First Bootstrap Project.


bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Bootstrap Template

The basic HTML Template of bootstrap look like this. Its is recommended to use default boilerplate of Bootsrap to avoid error.

Bootstrap Starter Template


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 4</title>
    
    <link href="css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <h1>Hello, Bootstrap 4!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap 5 Starter Template


<!doctype html>
<html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <title>Hello Bootstrap 5</title>
    </head>
    <body>
    
    <h1>Hello Bootstrap 5</h1>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

    </body>
</html>