How to use the bootstrap on a JSP page? In this bootstrap and JSP tutorial, let’s create a simple example to integrate bootstrap into the JSP page and enable its bootstrap features.
What is bootstrap?
Bootstrap is an open-source styling framework that contains rebuild CSS classes that help to style HTML elements faster and make web development easy.
- Bootstrap is used to design all the HTML elements like buttons, input fields, links, and Label Text.
- Bootstrap helps to create responsive designs.
- It’s easy, reliable, and faster than the traditional CSS approach.
What is JSP?
JSP is a java server page. where we can write java code in between the HTML elements. Yes, Java code is not required to integrate bootstrap but other teams, like to handle the server responses it’s required and useful.
So when we develop a java web application all the view files will be saved with .jsp extension. that contains HTML, CSS, JavaScript, and bootstraps. read more about the JSP tutorial.
Integrated bootstrap in JSP page.
As discussed above bootstrap is a styling framework that contains lots of rebuild CSS classes that we can use directly. So to use them we need to integrate the bootstrap framework into our project or a specific page.
To Integrate bootstrap in JSP just need to add the below libraries into the Head tag of a web page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
This enables all the features of bootstrap on the webpage or in cases of the complete project we need to integrate these libraries into the header file of the project.
Bootstrap integration in Java web project.
We can directly copy the bootstrap lib and place them in the header section of the specific web page. but when we talk about the complete project. we can’t place the bootstrap libraries on each page of the project. Well, for good practice we can keep these libraries in the header file of the project. so whenever the page load on the browser it will enable the bootstrap.
Integrate bootstrap online.
Bootstrap CDN libraries are available online that we can use on the web page as per the requirement and also use the latest versions of it. Check out the latest lib from the official bootstrap.
Note: when we use online CDN lib for bootstrap then the webpage must connect with the internet then only we can use the bootstrap features.
Integrate bootstrap offline.
To integrate bootstrap we can download the libraries from Download bootstrap. keep it inside a folder of the project and link these libs from that eternal location.
Note: It will not require an internet connection by using offline bootstrap lib we can use load and enable the bootstrap from an internal folder of the project repo.
Create a date picker in Bootstrap
Now, let’s create an example for bootstrap and design a simple date picker on a page. In the below example we are using CDN libraries under the head tag.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript"> $('.datepicker').datepicker(); </script>
</head>
<body>
<div class="form-group row"> <label for="email_address" class="col-md-4 col-form-label text-md-right">Date Of Birth<font color="red">*</font></label> <div class="col-md-6"> <input type="text" data-provide="datepicker" id="datepicker" class="form-control" placeholder="Enter Date Of Birth" name="dob" value="" > </div>
</body>
</html>
