How to add Bootstrap to HTML
Bootstrap is a popular framework that can help build responsive mobile-first sites using Bootstrap CDN and templar starter page.
Advantages
- It is extremely easy to use and has a user-friendly structure.
- It has a responsive CSS that is accompanied and aids in the website running on all platforms (e.g., phones, etc.)
- It is compatible with all modern browsers.
Download
You can download Bootstrap from here. If you do not want to host Bootstrap, you can use a CDN to do that for you.
Adding the JS
Bootstrap requires JS to run and, therefore, specific tags need to be added that enable these and ensure smooth usage. Append the following code within the head tag:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Adding the CSS
You can copy the CSS provided by the Bootstrap by adding the following to the head of the HTML page:
<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=“sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=“anonymous”>
This should be added before any other customized stylesheet is uploaded because it avoids overwriting any user-defined styles.
Basics
-
Add the HTML5 doctype and the language at the start of the page.
-
It is designed to be responsive to mobile devices, therefore, the following meta tag must be appended to ensure proper rendering.
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
-
The
width=device-widthensures that the page renders according to the width of the device, and theinitial-scale=1informs the page how scaled it should be. Theshrink-to-fit=noinforms the webpage not to shrink the webpage. -
The framework works on containers. You can either use
.container, which is of fixed width, or you may use the.container-fluidcontainer that occupies 100% of the available page width.
You can simply append the following at the start of your program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
</html>
Free Resources
