What is Bootstrap?

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


Why Bootstrap?

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

Bootstrap Version

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

Bootstrap 4 was released on 20-Jan-2018. Here is comparision between bootstrap 3 and bootstrap 4.

Boootstrap 3 vs Bootstrap 4
Bootstrap 3 Bootstrap 4
Support Internet Explorer 8 and 9 No support for I.E 8 and 9
Both Portrait and Landscape mode looks identical. Separate viewport for Portrait and Landscape mode on Smartphones.
Four Class prefix,
i.e col-lg- , col-md- , col-sm-, col-xs .
Five Class prefix,
i.e col-, col-lg- , col-md- , col-sm-, col-xs .
Use CSS Float and Clear for 12 grids. Use CSS Grids and Flex-box.
Non responsive layout option . Only responsive layout .
No Cards Use Cards instead of wells and panels.
No option for inverse Table Inverse Table Option.
Add responsive-table class to table parent div. Add responsive-table class to table itself.

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 getbootstrap.com. You can also customize bootstrap components and javascript and then download.

Download

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


<!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 Template</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, world!</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>