How to set image to center of an responsive navbar ?
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- 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.
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.
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.