How to Add Bootstrap in a Project?

Last Updated : 16 Oct, 2024

Bootstrap is a popular open-source framework for building responsive and mobile-first websites using HTML, CSS, and JavaScript. It provides pre-designed components and templates that simplify web development.

Why Use Bootstrap?

Bootstrap offers several advantages for web development:

Faster and Easier Development: Pre-designed components save time.
Responsive Design: Bootstrap ensures your website looks good on all devices, including mobile phones.
Cross-Browser Compatibility: Bootstrap pages work across different browsers without extra code.
Free and Open-Source: Available at getbootstrap.com.

Methods to Add Bootstrap to Your Project

Method 1: Using CDN Links

The easiest way to use Bootstrap is through CDN links, which allow you to load Bootstrap from a remote server. This method requires a stable internet connection but is quick to implement.

Steps to Add Bootstrap via CDN:

Step 1: Goto getbootstrap and click Getting Started. There you will find the below CDN links.

Step 2: Copy the CDN Links: You will need both the CSS and JavaScript CDN links.

CSS link:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

JavaScript link:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

Step 3: Insert Links in Your HTML Document: Paste the links inside the <head> tag for the CSS and inside the <body> tag for the JavaScript.

Here’s an example of how your HTML file should look:

HTML

<!DOCTYPE html> <html lang="en"> <head>     <!-- Meta tags for responsive design -->     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">          <!-- Bootstrap CSS -->     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet"            integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"            crossorigin="anonymous">          <title>Bootstrap Project</title> </head> <body>      <h1 class="text-center">Hello, Bootstrap!</h1>      <!-- Bootstrap JavaScript -->     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"              integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"              crossorigin="anonymous"></script> </body> </html>

Output:

Method 2: Downloading Bootstrap Files

Alternatively, you can download the Bootstrap files and include them locally in your project. This method allows you to work offline.

Step 1: Goto getbootstrap and click Getting Started. Click on the Download Bootstrap button and download the compiled CSS and JS.

Step 2: Extract the Files: Once downloaded, extract the files. You will find folders like css, js, and fonts (if needed).

Step 3: Include Bootstrap in Your Project: In your HTML file, link the local files by specifying the correct path.

CSS File:

<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">

JavaScript File:

<script src="path/to/bootstrap/js/bootstrap.bundle.min.js"></script>

Step 4: After completing the above steps, the final code will look like the following code example. The final code after saving files under the same folder and adding links under the head and body tag respectively.

Example: In the example, it can be observed that the downloaded files from bootstrap are included under the head and body section. Now the bootstrap classes can directly be used. As it is downloaded, thus no need for an internet connection required to load classes of bootstrap.