Bootstrap Introduction

The world’s most popular framework for building responsive, mobile-first sites and one page templates.

Getting started with Bootstrap

You can download the bootstrap source files from here or Use BootstrapCDN, provided for free by the folks at StackPath.

CSS

To load Bootstrap CSS copy and paste the below code in <head> tag.

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

Javascript

Many of the Bootstrap components require Javasccript like Popper.js, jQuery, etc. for their proper fubnctioning.

Place the below scripts at the end of your page i.e. just above </body> tag. You can place these scripts in <head> tag also but it will affect the pagespeed.

Bootstrap JS:
<!-- Bundle  -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script>

<!-- Separate  -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous" ></script>

Basic HTML Template with Bootstrap

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.

Don't forget to use the html doctype, language declaration and accurate character set.

Bootstrap Template Example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" >
<title>Hello World!</title>
</head>
<body>
<h1>Hello World</h1>
<!-- Otional JavaScript -->
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script>
</body>
</html>

Rsponsive Layout

Bootstrap is designed to be responsive to all sized devices. It is a mobile first framework.

For proper sizing must add the below <meta> tag inside the <head> element.

<!-- Meta Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
By Posted on
Tags

What’s included