How to set image to center of an responsive navbar ? - GeeksforGeeks

21 Dec, 2020
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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"        crossorigin="anonymous" />      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />      <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="https://media.geeksforgeeks.org/wp-content/uploads/20200921155935/gfglogo-300x39.png"                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="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js">    </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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"        crossorigin="anonymous" />      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />      <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="https://media.geeksforgeeks.org/wp-content/uploads/20200921155935/gfglogo-300x39.png"                    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>      <script src="https://code.jquery.com/jquery-3.4.1.js"        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="         crossorigin="anonymous">    </script>          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js">    </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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Technical Scripter 2020
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?