How to create footer in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Footer in Bootstrap: Simple Guide

To create a footer in Bootstrap, use the <footer> element with Bootstrap utility classes like bg-dark and text-white for styling. Add container and padding classes such as container and py-3 to organize content and spacing inside the footer.

📐

Syntax

The basic syntax for a Bootstrap footer uses the <footer> tag combined with Bootstrap classes for background color, text color, and spacing.

bg-dark: sets a dark background color.
text-white: makes the text white for contrast.
py-3: adds vertical padding for spacing.
container: centers and limits the width of the content.

html

<footer class="bg-dark text-white py-3">
  <div class="container">
    <!-- Footer content here -->
  </div>
</footer>

Output

A dark horizontal bar across the bottom with white text inside a centered container.

💻

Example

This example shows a simple footer with centered text using Bootstrap classes. It has a dark background, white text, and some padding for spacing.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Footer Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <footer class="bg-dark text-white py-3">
    <div class="container text-center">
      <p class="mb-0">&copy; 2024 My Website. All rights reserved.</p>
    </div>
  </footer>

</body>
</html>

Output

⚠️

Common Pitfalls

Common mistakes when creating footers in Bootstrap include:

Not using the <footer> semantic tag, which helps with accessibility and SEO.
Forgetting to add padding classes like py-3, which makes the footer content cramped.
Using text colors that do not contrast well with the background, making text hard to read.
Not wrapping content inside a container or container-fluid, causing the footer content to stretch too wide or misalign.

Example of a common mistake and fix:

html

<!-- Wrong: No padding and no container -->
<footer class="bg-dark text-white">
  Footer text without padding or container
</footer>

<!-- Right: Added padding and container -->
<footer class="bg-dark text-white py-3">
  <div class="container">
    Footer text with proper spacing and alignment
  </div>
</footer>

Output

The wrong footer looks cramped and text stretches full width; the right footer has spacing and centered content.

📊

Quick Reference

Here are quick tips for creating footers in Bootstrap:

Use <footer> for semantic meaning.
Apply background and text color classes like bg-dark and text-white.
Add vertical padding with classes like py-3 or py-4.
Wrap content inside container or container-fluid for alignment.
Use text alignment classes like text-center for centered content.

✅

Key Takeaways

Use the

Add background and text color classes like bg-dark and text-white for good contrast.

Include padding classes such as py-3 to give space inside the footer.

Wrap footer content inside a container to keep it aligned and not too wide.

Center text with text-center for a neat and balanced footer look.