Best Way to Add Bootstrap 4 to Project

Last Updated : 17 May, 2023

New developer generally face problems while implementing or adding bootstrap to their projects. The problem mainly occurs to implement the bootstrap all over the project (that is on all the required files) without adding the stylesheet and script on every page of the project.

In this article, we have provided a simplified way to the same.

Example without using Bootstrap:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .green {
            color: green;
        }
        
        .yellow {
            color: yellow;
        }
        
        .red {
            color: red;
        }
        
        .blue {
            color: blue;
        }
        
        .grey {
            color: grey;
        }
    </style>
</head>

<body>
    <h1>Geeksforgeeks</h1>
    <p class="green">This text is in green color</p>

    <p class="yellow">This text is in yellow color</p>

    <p class="red">This text is in red color</p>

    <p class="blue">This text is in blue color</p>

    <p class="grey">This tag is in grey color</p>

</body>

</html>

Output:

Adding Bootstrap to our project: We can change the font color and styles using Bootstrap. The general way to do this is to add stylesheets and script in our head tab of the code as shown.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>

    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p class="text-primary">This text is in blue color.</p>

    <p class="text-success">This text is in green color.</p>

    <p class="text-warning"> This text is in yellow color.</p>

    <p class="text-danger">This text is in red color.</p>

    <p class="text-secondary">This text is in grey color.</p>
</body>

</html>

Output:

You can note that the font of the same program is changed, not only font the spacing, placement size is also changed that means the Bootstrap 4 CDN has been applied.

Another way of adding Bootstrap to our project: In the above example, we saw that we need to add so many additional lines of code on every file of our project to apply bootstrap on that specific file. But this becomes exhausting when we have too many files to manage in our project.

Problem: If our project contains 30 files out of which we have to apply bootstrap on 18 files, then the above mentioned traditional method becomes too much load for the developer.

Solution: The same thing said above can be achieved just by writing one line of code in our file and setting the stylesheets and the scripts into some other file.

Explanation:

Step 1: Create a folder such as “components” in your ‘Web Pages’ folder of your project and also create a JSP file of your desired name such as “css-js.jsp” in components folder and clear all the prewritten code in the css-js.jsp file as shown.

Step 2:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"><>/script>

Copy the above quoted code into the “css-js.jsp” file. (The code provided are the stylesheets for the application of CSS and <script> tag for JavaScript )

Save the file

Stylesheets and script is copied to css-js file

Step 3: To apply the bootstrap on any page of your project you just need to include the “css-js.jsp” file in your head tag.

For example: <@include file=” components/css-js.jsp ”/>

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- This line will copy the entire code placed 
        in the mentioned file(css-js.jsp) to here
        (file in which bootstrap has to be applied) -->
    <@include file="components/css-js.jsp" />
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <p class="text-primary">This text is in blue color.</p>
    <p class="text-success">This text is in green color.</p>
    <p class="text-warning"> This text is in yellow color.</p>
    <p class="text-danger">This text is in red color.</p>
    <p class="text-secondary">This text is in grey color.</p>
</body>

</html>

The "include" line will add the code written in the css-js.jsp file to the file in which it is written (You can understand this as - the whole code is given a name, and now we are using that name everywhere we require instead of putting the whole code.)

That is instead of writing the whole quoted code (stylesheets and scripts) in every file you need to just write one line of code( that is include the file where the stylesheet and script is kept "components/css-js.jsp" in this example).

Output:

You can apply bootstrap on any file just by including the css-js.jsp file than to write the whole stylesheet on every page/file.

Additional Step 4: You need to follow this step only if you want to make your custom styles and write JavaScript code.

Step 4.1 Create two files with the Cascading Style Sheet (.css) and JavaScript File (.js) extension.

Step 4.2 Add these files in the "css-js.jsp" file using the below quoted text. This is also shown in the image below.

// Under CSS Section 
<link rel="stylesheet" href ="style.css"/>

// Under JavaScript section
<script src="script.js"></script>

**style.css** and **script.js** is included in the **css-js.jsp** file.

Now, you can add your code in these files and have a play with them. To get the stylesheets and script to add in your file you can visit -

Bootstrap Documentation

How to Add Bootstrap in a Project?

ankitsinghrajput

Improve

Article Tags :

Best Way to Add Bootstrap 4 to Project

Output:

Output:

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?