Bootstrap Footer
A footer is an area on the web page located at the bottom of the page. Footer contents are not highlighted much but it still has various use. Footer elements can be varied depending on the type of web page. The footer element consists of utility links like contact information, terms, and conditions, site maps, newsletters, awards, etc.
Creating a Bootstrap Footer
Bootstrap provides various options for designing footers. We can also add various elements like links, buttons, images in the footer.
The footer of any page starts with the .footer class. Let's see an example.
Example: Creating a Bootstrap Footer
Here is a simple example of creating a footer by using the bootstrap classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Footer </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<footer class="bg-light text-center text-lg-start">
<div class="container p-6">
<h2> Footer </h2>
<p> Add contents to footer </p>
</div>
</footer>
</body>
</html>
Output:
Output showing footer.
Footers contain multiple components. We will discuss them one by one.
Example: Bootstrap Text
We can add headings and contents in the footer. Text can be customized using text utilities and typography. Let's demonstrate it with an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Footer </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<footer class="bg-info text-center text-md-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer text 1</h5>
<p>
Add contents here. We can add contents using Bootstrap Grid.
</p>
</div>
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer text 2</h5>
<p>
Add contents here. We can add contents using Bootstrap Grid.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
Output
Here we have used a bootstrap grid and constructed two columns to add text.
Example: Bootstrap Links
Footer may contain one or many links. Add the URL address to <a> tag to add links in the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Footer </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<footer class="bg-info text-center text-md-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer text 1</h5>
<p>
Add contents here. We can add contents using Bootstrap Grid.
</p>
</div>
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer text 2</h5>
<p>
Add contents here. We can add contents using Bootstrap Grid.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer links</h5>
<a href="#!" class="text-dark">Link 1</a>
</div>
<div class="col-lg-6 ">
<h5 class="text-uppercase">Footer links</h5>
<a href="#!" class="text-dark">Link 2</a>
</div>
</div>
</div>
</footer>
</body>
</html>
Output:
Here we have added links in addition to text contents.
Example: Bootstrap Images
Putting images relevant to a web page can enhance the footer. We can add images using <img> tag. Here is the program to add images in the footer of the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Footer </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<footer class="bg-info text-center text-md-start">
<div class="container p-4">
<h3> Image in footer</h3>
<div class="row">
<div class="col-lg-4 ">
<img src="C:\Users\sandy\Desktop\studytonight\bootstrap\download.jfif" class="rounded float-left" alt="image">
</div>
<div class="col-lg-4 ">
<img src="C:\Users\sandy\Desktop\studytonight\bootstrap\download.jfif" class="rounded float-left" alt="image">
</div>
<div class="col-lg-4 ">
<img src="C:\Users\sandy\Desktop\studytonight\bootstrap\download.jfif" class="rounded float-left" alt="image">
</div>
</div>
</footer>
</body>
</html>
Output:
Here is the output for inserting an image in the footer.
Example: Bootstrap Copyright
On most of the web pages, we find a copyright section in the footer. Here is an example to add a copyright section to the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Footer </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<footer class="bg-light text-center text-white">
<!-- Grid container -->
<div class="container ">
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0.5, 0.2, 0.5, 0.2);">
© 2021 Copyright:
<a class="text-white" href="#">Compant site</a>
</div>
<!-- Copyright -->
</footer>
</body>
</html>
Output:
Here is the output of adding copyright to the footer.
