Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bootstrap Grid System with CSS, and by using Bootstrap’s Built-In Classes.

Using Bootstrap Grid System with CSS

The Bootstrap Grid System is a very famous component or topic for creating responsive website layouts. By using Rows and Columns classes we can create a basic grid system. Every row has only 12 columns and every column has different breakpoints for providing responsive behavior in various screen sizes. Below we create a basic footer page using Bootstrap and it is responsive also. For creating a footer we have an HTML footer tag.

Syntax

<footer class="...">
  <div class="container">
    <div class="row">
      <div class="col-*-*">
         ....
      </div>
    </div>
  </div>
</footer>

Example: Demonstration of the simple footer using Bootstrap 5.

We created a basic and Responsive footer. This footer page is developed by using Bootstrap 5 Classes for creating Row and Column break points in Grid System. Include the CDN links in the head section of the code for Bootstrap 5. One container is created with a row by using .row class from bootstrap. Four equal columns are created by using .col-md-3 column break point.

Output:

Using Bootstrap’s Built-In Classes

This is another approach for creating a simple footer page using Bootstrap 5. We can use only Bootstrap 5 classes only like background color, text colors, and other which are built-in classes. By using footer tag in HTML, we created a basic footer page.

Syntax

<footer class="bootstrap-classes">
     <div class="container">
           <span>....</span>
    </div>
</footer>

Example: Demonstration of the simple footer using Bootstrap 5. We used built-in classes for creating the basic footer page with using grid system.

Output: