Bootstrap 5 Navbar Brand

Last Updated : 10 Jan, 2023

Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest.

Bootstrap 5 Navbar Brand:

Text: The text in the user interface is added using the navbar-brand class.
Image: The texts created with the navbar-brand class can be placed inside an image element using the <img> tag.
Image and Text: Both image and text can be put together at the same time by using the d-inline-block class and align-text-top on the <img> element in the UI.

Syntax:

<nav class="navbar ...">
    <div class="container-fluid">
        <span class="navbar-brand">
            ....
        </span>
    </div>
</nav>

Example 1: In this example, we illustrate the text inside the navbar using .navbar-brand class.

HTML

<!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.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">   
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>

<body class="m-4">
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Navbar Brand text</h5>
    </div>
    <nav class="navbar mb-3 navbar-light bg-primary">
        <div class="container-fluid">
            <span class="navbar-brand mb-2 h3">
                A Computer Science portal for geeks.
            </span>
        </div>
    </nav>
    <nav class="navbar navbar-light bg-secondary">
        <div class="container-fluid">
            <span class="navbar-brand mb-2 ">
                Platform to practice programming problems
            </span>
        </div>
    </nav>
</body>
</html>

Output:

Bootstrap 5 Navbar Brand

Example 2: In this example, we set an image inside the navbar by replacing the image using .navbar-brand classes.

HTML

<!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">
    <title>Bootstrap 5-GeeksforGeeks </title>

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">
  
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>

<body class="m-4">
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Navbar Brand Image</h5>
    </div>
    <nav class="navbar navbar-expand-lg 
        navbar-dark bg-success">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221129215205/gfg.png" 
                    height="60">
            </a>          
        </div>
    </nav>
</body>
</html>

Output:

Bootstrap 5 Navbar Brand

Example 3: In this example, we set the image and text inside the navbar, text is set on the right side of the image.

HTML

<!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">
    <title>Bootstrap 5-GeeksforGeeks </title>

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">   
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>

<body class="m-4">
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Navbar Brand Image and text</h5>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221129215205/gfg.png" 
                    height="60">
            </a>
            <button class="navbar-toggler" type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navbarText">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href=
"https://write.geeksforgeeks.org">
                            Write
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href=
"https://write.geeksforgeeks.org/my-posts/">
                            My post
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>