Footer and Bottom Bar

The footer and bottom bar are components placed at the end of each web page. When you implement the bottom bar, the bar is usually displayed at the bottom of the screen regardless of the scroll position.

In this lesson, we'll explain how to implement the fixed position bottom bar with a footer. For the bottom bar, we'll add buttons with links to the previous page and the next page.

This is the target design of the footer and bottom bar.

In this case, we wrap the bottom bar with the footer tags. To create buttons, we use <a> tags with the classes already defined before in this chapter. As footer text, we set the course name. This is an example of HTML code.

<footer>
  <div class="btn-group">
    <a href="chapter16.html" class="btn-previous">←</a>
    <a href="chapter17.html" class="btn-next">→</a>
  </div>
  <p>HTML & CSS Introduction</p>
</footer>

Position: fixed and bottom: 0

To style the background of the footer area and footer text, add CSS code. To fix the position of the footer section at the bottom of the screen, set position: fixed and bottom: 0. We'll explain the position property in a more comprehensive way in the next course. You also need CSS code for buttons that have already been explained before. This is an example of CSS code.

footer{
  width: 100%;
  height: 50px;
  background-color: azure;
  margin: 0px;
  padding-top: 5px;
  text-align: center;
  position: fixed;
  bottom: 0;
}

footer p{
  color:#006e78;
  font-size:0.8rem;
  margin: 5px;
  padding:0;
}

.btn-group{
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 5px;
}

.btn-previous{
  background-color:#2197A2;
  color: white;
  border-style: none;
  width: 60px;
  height: 25px;
  font-size: 1rem;
  font-family: roboto, sans-serif;
  border-radius: 25px 0px 0px 25px;
  text-decoration: none;
  text-align: center;
  line-height: 25px;
}

.btn-next{
  background-color:#2197A2;
  color: white;
  border-style: none;
  width: 60px;
  height: 25px;
  font-size: 1rem;
  font-family: roboto, sans-serif;
  border-radius: 0px 25px 25px 0px;
  text-decoration: none;
  text-align: center;
  line-height: 25px;
}

<h2 style="text-align: center;">Footer</h2>
<p style="text-align: center;">See the bottom of this page</p>
<br>
<br>

<!--Footer-->
<footer>
  <div class="btn-group">
    <a href="chapter16.html" class="btn-previous">←</a>
    <a href="chapter18.html" class="btn-next">→</a>
  </div>
  <p>HTML & CSS Introduction</p>
</footer>
<!--End footer-->

/* Footer */
footer{
  width: 100%;
  height: 50px;
  background-color: azure;
  margin: 0px;
  padding-top: 5px;
  text-align: center;
  position: fixed;
  bottom: 0;
}

footer p{
  color:#006e78;
  font-size:0.8rem;
  margin: 5px;
  padding:0;
}