Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Add Bootstrap in a Project ?

  • Last Updated : 21 Oct, 2021

A bootstrap is an open-source tool consisting of HTML, CSS, JavaScript frameworks. It is a dedicated responsive web development tool consisting of ready-to-use templates. It was originally named Twitter Blueprint which was developed by Mark Otto and  Jacob Thornton. Over time bootstrap has evolved over version 5. So the basic website can be developed using bootstrap due to the ready-made templates available.

Reason to choose Bootstrap:

  • Faster and Easier Web-Development.
  • It creates Platform-independent web pages.
  • It creates Responsive Web-pages.
  • It’s designed to be responsive to mobile devices too.
  • It’s Free! Available on www.getbootstrap.com

Websites that were built with a lot of CSS and JavaScript can now be built with a few lines of code using Bootstrap. Bootstrap comprises of mainly three components:

  • CSS
  • Fonts
  • Javascript

The bootstrap can be used in 2 ways:

  • Using Bootstrap CDN Link.
  • By downloading the Bootstrap file.

We can easily get the resources for both approaches from the official website. Let’s begin the discussion with the first approach.



Method 1: Using CDN links – This method of installing Bootstrap is fairly easy but it requires a stable internet connection. It is highly recommended that you follow this method.

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

Step 2: Copy the links & paste it inside  the <head> tag.

CSS link:

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>

JavaScript link:

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>

  
 



Step 3: After completing the above steps, the code will be like the following:

 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <!-- Bootstrap CSS -->
    <link href=
        rel="stylesheet" integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous" />
</head>
 
<body>
    <h1>Hello, world!</h1>
 
    <div>
        You're learning Bootstrap
        on Geeksforgeeks.org
    </div>
 
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src=
        integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous">
    </script>
 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src=
        integrity=
"sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
        crossorigin="anonymous">
    </script>
     
    <script src=
        integrity=
"sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
        crossorigin="anonymous">
    </script>  -->
</body>
 
</html>


 
 

At this stage, we have completed the installation process & we can now start to implement the logic.

 

Example: This example illustrates the use of the Bootstrap CDN link, in order to use the Bootstrap with the HTML document.

 

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
     
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
 
    <!-- Bootstrap CSS -->
    <link href=
          rel="stylesheet"
          integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous"/>
    <title>Welcome to GeeksforGeeks</title>
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
 
      <h3>Bootstrap Button</h3>
    <hr />
    <button type="button"
            class="btn btn-primary">Primary
    </button>
    <button type="button"
            class="btn btn-secondary">Secondary
    </button>
    <button type="button"
            class="btn btn-success">Success
    </button>
    <button type="button"
            class="btn btn-danger">Danger
    </button>
    <button type="button"
            class="btn btn-warning">Warning
    </button>
    <button type="button"
            class="btn btn-info">Info
    </button>
    <button type="button"
            class="btn btn-light">Light
    </button>
    <button type="button"
            class="btn btn-dark">Dark
    </button>
    <button type="button"
            class="btn btn-link">Link
    </button>
</body>
 
</html>


 
 



Output:

 

Method 2: By downloading Bootstrap – This method of installing bootstrap is also easy but it can work offline ( doesn’t require an internet connection ) but it might not work for some browsers.

 

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

 

Step 2: A .zip file would get downloaded. Extract it and go into the distribution folder. You would see 2 folders named CSS and JS. You can make your HTML file there and then you must paste these links in their respective sections. Under CSS files the most important files to be used are bootstrap and bootstrap.min. Under JS files, the most important are bootstrap.min.js and bootstrap.js.

 

Step 3: Make a separate project folder and create an HTML file. Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.



 

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.

 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
 
      <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
 
    <link rel="stylesheet"
          type="text/css"
          href="css/bootstrap.css" />
</head>
   
<body>
    <h1>Welcome to gfg</h1>
    <script type="text/javascript"
            href="js/jquery.js">
    </script>
    <script type="text/javascript"
            href="js/bootstrap.min.js">
    </script>
</body>
 
</html>


 
 

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.

 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <link rel="stylesheet" type="text/css"
        href="css/bootstrap.css" />
</head>
 
<body>
    <h1>Welcome to GeeksforGeeks</h1>
 
    <div class="mb-3">
        <label for="exampleFormControlInput1"
            class="form-label">
            Email address
        </label>
 
        <input type="email" class="form-control"
            id="exampleFormControlInput1"
            placeholder="name@example.com" />
    </div>
 
    <div class="mb-3">
        <label for="exampleFormControlTextarea1"
            class="form-label">
            Example textarea
        </label>
 
        <textarea class="form-control"
            id="exampleFormControlTextarea1" rows="3">
      </textarea>
    </div>
 
    <script type="text/javascript"
        href="js/jquery.js">
    </script>
     
    <script type="text/javascript"
        href="js/bootstrap.min.js">
    </script>
</body>
 
</html>


 
 

Output:

 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!