Bootstrap is one of the most highly utilized CSS frameworks by developers and on web applications around the globe due to its ability to build fast and very responsive web applications. It was developed by Mark Otto and Jacob Thornton at Twitter. It is built with sass using variables and mixins and comes with a responsive grid system, and extensive prebuilt components.
Responsiveness of any web application is the ability of the web applications to fix in appropriately on different screen sizes viewing it. Any web application that is said to meet the condition mentioned above is said to be responsive.
I personally highly use bootstrap in almost all my frontend web application developments, I have been using it from when its version was version 3 that is Bootstrap 3 and its latest version is version 5.1 which is Bootstrap 5.1. Bootstrap can be used with frontend web development frameworks like React, Vue, Angular, etc. It can also be utilized on basic web applications developed using HTML, CSS, and JavaScript.
Bootstrap can be installed on a web application or project using its CDN or by downloading the complied zip file and linking the required files in the head tag of the web application or projects HTML pages.
To install using CDN, it consists of two major links, the CSS link and the js link. the CSS link goes into the head tag of the web application or projects HTML page when the js script link goes within the body tag before the body tag closes.
The CSS CDN link is:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
While for the Javascript CDN, it can be added using two options, one is using the Bundle Javascript CDN link or using the Separated Javascript CDN link.
The Bundle Javascript CDN script link is:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
The separated Javascript CDN script link is:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Bootstrap can also be installed using the compiled CSS and Js files, which can be downloaded using this link.
Also for easy installation of Bootstrap to web projects this starter template can also be used which consists of the CSS and Js CDN links and scripts shown below:
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
//Optional JavaScript; choose one of the two!
//Option 1: Bootstrap Bundle with Popper
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
//Option 2: Separate Popper and Bootstrap JS
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I would be dropping posts explaining how to install bootstrap on frontend web application development frameworks such as React, Vue, Angular, etc using package installers like npm or yarn soon, so stay tuned.
Thanks for reading 馃. If you find this post interesting you can help or support it with reblogging, upvoting, and commenting, it would be highly appreciated.