How to create Header and Footer using bootstrap

Now a basic app ready to run Now Start the development with design. We will design all the module step by step then integrate that module in the application. That will be more clear to understand.

Mainly a web page is a divide into the three-part Header, Footer and Body. And the Header and footer part will be common for all the pages. Let’s design header and footer then will include the same header and footer on every page.

Create Header using Bootstrap

During this Java web application development tutorial, We are going to use Bootstrap so let’s see how to integrate bootStrap in your project and create a header using bootstrap.

What is bootstrap?

Bootstrap is a CSS framework that provides pre implement classes to design responsive web elements. Thousands of classes are available in the bootstrap library. Explore that library form the official website of bootstrap.

How to Integrate bootstrap in Java project

There are two way to integrate bootstrap in the Java project

  • Download BootStrap and import it.
  • Pass the Live libs to use bootstrap.

Below is the code to add bootstrap online just you need to copy the below code inside the header part of the webpage.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Done, Now you are ready to use all the bootstrap features or classes.

Create Header using bootstrap

Create a header.jsp and Add the below code.

<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Complete Source code of my header.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Create footer using bootstrap

Create a footer.jsp and Add the below code.

 
<!-- Footer -->
<footer style="background: black;" class="page-footer font-small blue">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2020 Copyright:
    <a href="https://codedec.com/"> Codedec.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->
 
</body>
</html>

Design a Header using CSS

If you do not want to use bootstrap in the project. We can create a simple header and footer using CSS and JS. Let’s see how to create header and footer using CSS, js, and HTML.

Create some folders(CSS, JS, Images, JSP) under the Webapp to keep all the resources separately.

Create a style.css under the CSS folder to makeover your elements

Have you notice Header and Footer is a common part of the application. I mean all the web pages of the application will share common header and footer so will create a separate header.jsp. And include the same file in all the page using by using “<%@ include file=“header.jsp”%>”.

header.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<link href="/JavaWebApp/css/style.css" rel="stylesheet">
</head>
 
<body>
 
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#login">Login</a></li>
  <li><a href="#register">Register</a></li>
  <li><a href="#contactus">Contact Us</a></li>
  <li><a href="#aboutus">About US</a></li>
</ul>
</body>
</html>

Let’s understand the code of “header.jsp”.

Include CSS in the header file.

In the below line of code, “/JavaWebApp/css/style.css” is the path of CSS file.

<link href="/JavaWebApp/css/style.css" rel="stylesheet">

Create Menu in the header.

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#login">Login</a></li>
  <li><a href="#register">Register</a></li>
  <li><a href="#contactus">Contact Us</a></li>
  <li><a href="#aboutus">About US</a></li>
</ul>

Design Footer using CSS

Create footer.jsp under the JSP folder

 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/JavaWebApp/css/style.css" rel="stylesheet" >
 
<title>Footer</title>
</head>
<body>
 
<footer>
        <address>
            Postal Address: Door No.00, Street, City, State, Country.
        </address>
        <p>Copyright © 2020 All rights reserved <a href="http://codedec.com/">Codedec</a></p>
</footer>
 
</body>
</html>

How to include header and footer file in welcome page (index.jsp) or other files.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home Page</title>
<%@ include file="jsp/header.jsp"%>
</head>
<body>
    <div>
        <H1>This is the home page.</H1>
        <H2> Body Part.</H2>
    </div>
</body>
 
<%@ include file="jsp/footer.jsp"%>
</html>