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:
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=
<script src=
</script>
<script src=
</script>
<script src=
</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:
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>
<@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:
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...