Best Way to Add Bootstrap 4 to Project - GeeksforGeeks

10 Sep, 2021
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.
<!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>
Without using Bootstrap
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>
Bootstrap applied
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.
All the prewritten code is removed
Step 2:
<!– For CSS –><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”><link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”>
<!– For JavaScript –><script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” 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).
Bootstrap applied
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
HTML-Questions
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property