How To Create a Responsive Bootstrap Navbar - Step by Step Tutorial

How To Create a Responsive Bootstrap Navbar - Step by Step Tutorial

·

4 min read

Creating a responsive Bootstrap navbar can be a little intimidating at first, but we've made this step by step guide showing you exactly the process for you to be understand what every class does.

For this how-to, we will be creating a navbar from one of our own free templates over at Codewell.

Bootstrap Navbar for Fiber

Setting up the index.html file

You will first need to import Bootstrap 5's CSS stylesheet into your <head> tag. This is Bootstrap's CSS stylesheet link:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

and we'll add Bootstrap's <script> tag right above our closing <body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

and this is what your index.html file should look like now:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Fiber Landing Page</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>    
</body>

</html>

Let's start constructing the Bootstrap navbar

1) Create a <nav> element and add the following code inside:

<nav>
        <a href='#'>Fiber</a>
        <ul>
            <li><a href='#'>Community</a></li>
            <li><a href='#'>Pricing</a></li>
            <li><a href='#'>Features</a></li>
        </ul>
        <div class="cta">
            <button class="cta__secondary">Sign In</button>
            <button class="cta__primary">Sign Up</button>
        </div>
</nav>

2) We'll add the classes 'navbar' and 'navbar-expand' to the <nav>, Bootstrap has small, medium, large, and extra large classes for responsiveness, but since we're on desktop, the navbar will always be showing.

Your code should now look like this:

<nav class='navbar navbar-expand'>
        <a href='#'>Fiber</a>
        <ul>
            <li><a href='#'>Community</a></li>
            <li><a href='#'>Pricing</a></li>
            <li><a href='#'>Features</a></li>
        </ul>
        <div class="cta">
            <button class="cta__secondary">Sign In</button>
            <button class="cta__primary">Sign Up</button>
        </div>
    </nav>

3) Currently, there's no space between the edge of the browser and the navbar, so we'll create a <div> with the class container-fluid around everything inside the <nav> element.

Your code should now look like this:

<nav class='navbar navbar-expand'>
        <div class='container-fluid'>
            <a href='#'>Fiber</a>
            <ul>
                <li><a href='#'>Community</a></li>
                <li><a href='#'>Pricing</a></li>
                <li><a href='#'>Features</a></li>
            </ul>
            <div class="cta">
                <button class="cta__secondary">Sign In</button>
                <button class="cta__primary">Sign Up</button>
            </div>
        </div>
    </nav>

This is what you should have now, we're almost getting there.

Navbar progress

4) We'll add the class 'navbar-nav' to the our <ul> element and the class 'nav-link' to our <a> elements.

Your code should now look like this:

<nav class='navbar navbar-expand'>
        <div class='container-fluid'>
            <a href='#'>Fiber</a>
            <ul class='navbar-nav'>
                <li><a href='#' class='nav-link'>Community</a></li>
                <li><a href='#' class='nav-link'>Pricing</a></li>
                <li><a href='#' class='nav-link'>Features</a></li>
            </ul>
            <div class="cta">
                <button class="cta__secondary">Sign In</button>
                <button class="cta__primary">Sign Up</button>
            </div>
        </div>
    </nav>

5) Let's keep the finishing touches for later, for now, we want this navbar to be responsive at small screen sizes. For that, we'll need to refactor our code a little.

  • We'll add

    <button type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" class="navbar-toggler"><span class='navbar-toggler-icon'></span></button>
    

    below our <a> tag. This is basically the hamburger menu that will show on smaller screens.

  • We will then wrap everything from the <ul> to the 'cta' <div> in this code:

<div class='collapse navbar-collapse d-flex justify-content-between' id='navbar-menu'>
  • We will also add -sm to our class in the <nav> element.

  • We will also add ms-auto to our 'cta' div.

Your final code should look like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Fiber Landing Page</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <nav class='navbar navbar-expand-sm '>
        <div class='container-fluid'>
            <a href='#' class='navbar-brand'>Fiber</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" class="navbar-toggler"><span class='navbar-toggler-icon'></span></button>
            <div class='collapse navbar-collapse' id='navbar-menu'>
                <ul class='navbar-nav'>
                    <li><a href='#' class='nav-link'>Community</a></li>
                    <li><a href='#' class='nav-link'>Pricing</a></li>
                    <li><a href='#' class='nav-link'>Features</a></li>
                </ul>
                <div class="cta ms-auto">
                    <button class="cta__secondary">Sign In</button>
                    <button class="cta__primary">Sign Up</button>
                </div>
            </div>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>    
</body>

</html>

</html>

We now have a fully working responsive Bootstrap navbar, all that's left to do is to style it.

Working Navbar

CSS

body {
  background-color: #FBF8F3;
}

a, .nav-link{
  color: #000000;
}

.navbar-brand{
  font-weight: 700;
}

.cta__secondary{
  background-color: transparent;
  border: none;
  padding: 12px 24px;
}

.cta__primary{
  background-color: #4D13D1;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  color: white;
  font-weight: 500;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

That's it! You've created your responsive bootstrap navbar! If you're still learning how to code, check out our article to find websites you can practice your coding skills on. If you've enjoyed this, be sure to subscribe to our newsletter for more content like this.