Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
bootstrap

How to add Bootstrap to HTML

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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-width ensures that the page renders according to the width of the device, and the initial-scale=1 informs the page how scaled it should be. The shrink-to-fit=no informs 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-fluid container 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>

RELATED TAGS

html
bootstrap
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring