English

Bootstrap Tutorial

Bootstrap Layouts

Bootstrap Content

Bootstrap Components

Bootstrap Forms

Bootstrap Helpers

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Sticky Footer Navbar Demo

Hello there, aspiring web developers! Today, we're going to embark on an exciting journey to create a sticky footer navbar using Bootstrap. As your friendly neighborhood computer teacher, I'll guide you through this process step-by-step, making sure you understand every bit of code we write. So, grab your favorite beverage, sit back, and let's dive in!

Bootstrap-Sticky footer navbar Demo

What is a Sticky Footer Navbar?

Before we start coding, let's understand what we're trying to achieve. A sticky footer navbar is a navigation bar that stays at the bottom of the page, no matter how much content is on the page or how far you scroll. It's like that loyal friend who sticks with you through thick and thin!

Why Use a Sticky Footer Navbar?

  1. It provides easy access to important links or actions.
  2. It saves screen space, especially on mobile devices.
  3. It improves user experience by keeping navigation options always visible.

Now that we know what we're building and why it's useful, let's get our hands dirty with some code!

Setting Up Our HTML Structure

First, we need to set up the basic structure of our HTML document. Don't worry if you're new to HTML; I'll explain each part as we go along.

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer Navbar Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
    <!-- We'll add our content here -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Let's break this down:

  1. <!DOCTYPE html>: This tells the browser we're using HTML5.
  2. <html lang="en" class="h-100">: The root element of our page. We've added the h-100 class to make it take up 100% of the viewport height.
  3. Inside the <head> tag:
    • We set the character encoding and viewport.
    • We give our page a title.
    • We link to the Bootstrap CSS file.
  4. <body class="d-flex flex-column h-100">: We're using Bootstrap classes to make the body a flex container that takes up 100% of the viewport height.
  5. At the end of the <body>, we include the Bootstrap JavaScript file.

Creating the Header

Now, let's add a header to our page:

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Fixed navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</header>

This code creates a responsive navbar that sticks to the top of the page. It includes a brand name, navigation links, and a search form. The navbar collapses into a hamburger menu on smaller screens.

Adding Main Content

Next, let's add some main content to our page:

<main class="flex-shrink-0">
    <div class="container">
        <h1 class="mt-5">Sticky footer with fixed navbar</h1>
        <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
        <p>Use <a href="#">the sticky footer with a fixed navbar</a> if need be, too.</p>
    </div>
</main>

The flex-shrink-0 class on the <main> element ensures that it doesn't shrink when there's not enough space, pushing our footer down.

Creating the Sticky Footer

Now for the star of our show, the sticky footer:

<footer class="footer mt-auto py-3 bg-light">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>

The mt-auto class pushes the footer to the bottom of the page when there's not enough content to fill the viewport.

Adding Custom CSS

To make everything work perfectly, we need to add a bit of custom CSS. Add this inside a <style> tag in the <head> of your document:

<style>
    main > .container {
        padding: 60px 15px 0;
    }

    .footer {
        background-color: #f5f5f5;
    }
</style>

This CSS adds some padding to the top of our main content (to prevent it from being hidden behind the fixed navbar) and sets a background color for the footer.

Putting It All Together

Here's our complete code:

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer Navbar Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        main > .container {
            padding: 60px 15px 0;
        }

        .footer {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Fixed navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>

    <main class="flex-shrink-0">
        <div class="container">
            <h1 class="mt-5">Sticky footer with fixed navbar</h1>
            <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
            <p>Use <a href="#">the sticky footer with a fixed navbar</a> if need be, too.</p>
        </div>
    </main>

    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <span class="text-muted">Place sticky footer content here.</span>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Conclusion

And there you have it, folks! We've successfully created a webpage with a sticky footer navbar using Bootstrap. Remember, web development is like cooking - it takes practice to get it just right. So don't be discouraged if it doesn't look perfect on your first try. Keep experimenting, and before you know it, you'll be whipping up beautiful web pages like a master chef!

Here's a quick recap of what we've learned:

Component Purpose
HTML Structure Provides the basic structure of our webpage
Bootstrap CSS Gives us pre-styled components and utility classes
Custom CSS Allows us to fine-tune the appearance of our page
Header Contains our navigation bar
Main Content Holds the primary content of our page
Footer Stays at the bottom of the page, even when content is short
Bootstrap JS Enables interactive components like the collapsible navbar

Remember, the key to mastering web development is practice and curiosity. So keep coding, keep learning, and most importantly, have fun! Until next time, happy coding!

Credits: Image by storyset

Previous Tutorial:
Bootstrap-Dashboard Demo
Next Tutorial:
Bootstrap-Masonry Demo