Open In App

How to set image to center of an responsive navbar ?

Improve
Improve
Like Article
Like
Save
Share
Report

In order to make a website responsive, the clever to-do is by using Bootstrap. By using Bootstrap, we can make our website look good and responsive.

There are two ways to set an image or logo in the center of a responsive navbar. They are: 

  • Using CSS
  • Using Bootstrap

Now let’s understand each of them.

Using CSS: In this method, we use our own styling to center the image in the navbar. We are going to embed CSS code into HTML code. Here we have given flex property to our brand (image or logo), the width of 100%, and justify-content as the center. These properties set our logo in the center of the navbar.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous" />
  
    <link rel="stylesheet" href=
  
    <link rel="stylesheet" href=
  
    <style type="text/css">
        .navbar-brand {
            display: flex;
            width: 100%;
            justify-content: center;
        }
    </style>
</head>
  
<body>
    <nav class="navbar navbar-expand-lg 
                    navbar-dark bg-primary">
  
        <!-- Brand and toggle get grouped 
            for better mobile display -->
        <a class="navbar-brand" href="#">
            <img src=
                width="300" height="50" alt="" />
        </a>
  
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target=
            "#bs-example-navbar-collapse-1"
            aria-controls="bs-example-navbar-collapse-1"
            aria-expanded="false" 
            aria-label="Toggle navigation">
              
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <!-- Anything inside of collapse 
            navbar-collapse goes into the "hamburger" -->
        <div class="collapse navbar-collapse" 
            id="bs-example-navbar-collapse-1">
              
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Home
                        <span class="sr-only">
                            (current)
                        </span>
                    </a>
                </li>
  
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Item1
                    </a>
                </li>
  
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Item2
                    </a>
                </li>
  
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Item3</a>
                </li>
            </ul>
        </div>
    </nav>
  
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity=
        "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script src=
    </script>
</body>
  
</html>


Output:

We can see that the GeeksforGeeks logo is aligned in the center of the navbar while all other navbar items are in the right.

Using Bootstrap: In this method, we can save ourselves from writing extra CSS code. We just need to add a div tag with the class as a container and put the navbar-brand(image or logo) inside this div. After that, we just need to add the class mx-auto to the navbar-brand class. The mx-auto class is a Bootstrap class just adjusts the margin on both the left and right sides to align the content in the center.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Navbar</title>
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous" />
  
    <link rel="stylesheet" href=
  
    <link rel="stylesheet" href=
  
    <link rel="stylesheet" type="text/css" 
        href="gfg.css" />
</head>
  
<body>
    <nav class="navbar navbar-expand-lg 
        navbar-dark bg-primary">
  
        <!-- Brand and toggle get grouped for 
            better mobile display -->
        <div class="container">
            <a class="navbar-brand mx-auto" href="#">
                <img src=
                    width="200" height="50" alt="" />
            </a>
        </div>
  
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target
            ="#bs-example-navbar-collapse-1"
            aria-controls="bs-example-navbar-collapse-1"
            aria-expanded="false" 
            aria-label="Toggle navigation">
              
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <!-- Anything inside of collapse navbar-collapse
            goes into the "hamburger" -->
        <div class="collapse navbar-collapse" 
            id="bs-example-navbar-collapse-1">
              
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Home<span class="sr-only">(current)</span>
                    </a>
                </li>
  
                <li class="nav-item">
                    <a class="nav-link" href="#">Item1</a>
                </li>
                  
                <li class="nav-item">
                    <a class="nav-link" href="#">Item2</a>
                </li>
                  
                <li class="nav-item">
                    <a class="nav-link" href="#">Item3</a>
                </li>
            </ul>
        </div>
    </nav>
  
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</body>
  
</html>


Output:

We can see that the GeeksforGeeks logo is aligned to the center of the navbar while all other navbar items are in the right. In these two ways, we can image in the center of a responsive navbar.



Last Updated : 21 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads