Open In App

Bootstrap Navbar Brand Image

Last Updated : 07 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage.

Pre-requisite:

To use images on the navbar you need to have the knowledge of Bootstrap 5 Navbar Brand.

Navbar Brand Image Class: There is no predefined class to put an image in the navbar, we only need to put the image inside of the navbar-brand class used element.

Syntax:

<nav class="navbar navbar-*">
    <div>
        <a class="navbar-brand" href="#">
            <img src="" alt="" width="" height="" alt="">
        </a>
    </div>
</nav>

Example 1: The code example below demonstrates how we can use the Bootstrap 5 Navbar Brand Image.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Navbar Brand Image</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="m-2">
    <div>
        <h4>Bootstrap 5 Navbar Brand Image</h4>
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mt-3">
        <div class="container">
            <a class="navbar-brand" href="#"><img
                    src=
"https://media.geeksforgeeks.org/auth/profile/8ceu3jpotjla4m5wpbm7" 
                    alt="" 
                    width="30"
                    height="30"></a>
            <div class="collapse navbar-collapse" 
                 id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" a
                           ria-current="page" 
                           href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- New tabs -->
                    <li class="nav-item">
                        <a class="nav-link" href="#">DSA</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Web tech</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Python</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Bootstrap Bundle with Popper -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
        integrity=
"sha384-52z9Z1PIpSVl7YsPEJc3cMWCiVX9pMPdR5+YYg8vTl3YYqvo9sOGcDhViWyDyGVg"
        crossorigin="anonymous"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity=
"sha384-hhqIQv5GE0w4aQJJcP+J8yUkE5T4+JpK5YVxFkALBzhUTH5+VrA7f+rC2J84lC6H"
        crossorigin="anonymous"></script>
</body>

</html>

Output:

Bootstrap-Navbar-Brand-Image

Bootstrap 5 Navbar Brand Image Example Output

Example 2: The code example below demonstrates how we can use the Bootstrap 5 Navbar Brand Image and align it to the right of the navbar.

HTML
<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="m-2">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h4>Bootstrap 5 Navbar Brand Image</h4>
    </div>
    <nav class="navbar
                navbar-expand-lg 
                navbar-light 
                bg-light 
                mt-3">

        <div class="collapse navbar-collapse justify-content-end" 
             id="navbarSupportedContent">
            <ul class="navbar-nav">
                <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="navbar-brand" href="#"><img
                            src=
"https://media.geeksforgeeks.org/auth/profile/8ceu3jpotjla4m5wpbm7" 
                            alt="" 
                            width="30"
                            height="30">
                    </a>
                </li>
            </ul>
        </div>
    </nav>

</body>

</html>

Output:

Bootstrap-Navbar-Brand-Image

Bootstrap Navbar Brand Image Example Output




Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads