Introduction Getting Started Containers Grid Typography

Bootstrap Getting Started

We can create a basic Bootstrap template by including the Bootstrap CSS and JS files via CDN or link downloaded Bootstrap CSS and JS files locally.

Creating First Web Page with Bootstrap:

Step1: Create an HTML page

We will create a simple HTML template as a base where we will use Bootstrap. For that, the first thing you want to do is create a folder on your computer or server for the project files. In this case, I will simply call it bootstrap. Here, create a new text file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then paste the code below into it.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Step2: Load Bootstrap via CDN or Host Bootstrap locally

Loading Bootstrap via CDN:

It is recommended to add Bootstrap in your project via CDN (Content Delivery Network) because CDN offers performance benefit by reducing the loading time, since they are hosting the files on multiple servers spread across the globe so that when a user requests the file it will be served from the server nearest to them.

To get Bootstrap CSS into your page, simply paste the code below into the <head> section of your template.

<!-- Bootstrap CSS --> 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css 
 "rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous">

To get Bootstrap JS Bundle with Popper into your page, simply paste the code below into the <head> section (or end of the page) of your template.

Bootstrap requires a third-party library Popper.js for some of its components like popovers and tooltips. You can either include it separately or simply include Bootstrap JS bundled with Popper.

<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
 integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous">

When you now save the file, any browser that opens it will automatically load the Bootstrap assets.

Bootstrap Template with CDN: Try It



<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous">
</body>
</html>

Test a bootstrap component: Try It

Add the following code to your bootstrap 5 template in the body section. It provides an Bootstrap alert component.


<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

Including Bootsrap5 downloaded files:

An alternative way to set up Bootstrap is to download it to your hard driveand use the files locally.

There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap 5 files from here.

You can download the latest version of Bootstrap from https://getbootstrap.com/

Download ready-to-use compiled code for Bootstrap to easily drop into your project, which includes:

Compiled and minified CSS bundles

Compiled and minified JavaScript plugins

Once you have done so, unzip the file and copy its contents into the samedirectory as index.html. After that, you can load the Bootstrap CSS intoyour project like this:

Basic Template with downloaded files:Try It Download



<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>Bootstrap5 Basic Template</h1>
<script src="js/bootstrap.bundle.min">
</body>
</html>