How To Add Image To Navigation Bar Html

How to set prototype to heart of an responsive navbar ?

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

In that location are two means to set an image or logo in the eye 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 take given flex property to our brand (image or logo), the width of 100%, and justify-content as the center. These properties ready our logo in the heart of the navbar.

Example:

<!DOCTYPE html>

< html >

< head >

< link rel = "stylesheet" href =

integrity =

"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"

crossorigin = "anonymous" />

< link rel = "stylesheet" href =

< way type = "text/css" >

.navbar-brand {

display: flex;

width: 100%;

justify-content: center;

}

</ style >

</ head >

< trunk >

< nav class="navbar navbar-expand-lg

navbar-nighttime bg-primary">

< a form = "navbar-brand" href = "#" >

< img src =

width = "300" height = "fifty" alt = "" />

</ a >

< button grade = "navbar-toggler" blazon = "button"

data-toggle = "plummet" data-target =

"#bs-example-navbar-collapse-1"

aria-controls = "bs-case-navbar-plummet-ane"

aria-expanded = "false"

aria-label = "Toggle navigation" >

< span class = "navbar-toggler-icon" ></ span >

</ button >

< div class = "plummet navbar-collapse"

id = "bs-example-navbar-collapse-1" >

< ul class = "navbar-nav ml-auto" >

< li class = "nav-item" >

< a class = "nav-link" href = "#" >

Dwelling

< span course = "sr-just" >

(current)

</ span >

</ a >

</ li >

< li class = "nav-item" >

< a class = "nav-link" href = "#" >

Item1

</ a >

</ li >

< li course = "nav-item" >

< a class = "nav-link" href = "#" >

Item2

</ a >

</ li >

< li class = "nav-item" >

< a form = "nav-link" href = "#" >

Item3</ a >

</ li >

</ ul >

</ div >

</ nav >

"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="

crossorigin = "anonymous" >

</ script >

< script src =

</ script >

< script src =

</ script >

</ body >

</ html >

Output:

We tin run into that the GeeksforGeeks logo is aligned in the middle of the navbar while all other navbar items are in the right.

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

Instance:

<!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" blazon = "text/css"

href = "gfg.css" />

</ head >

< body >

< nav form="navbar navbar-aggrandize-lg

navbar-dark bg-primary">

< div class = "container" >

< a course = "navbar-brand mx-car" href = "#" >

< img src =

width = "200" summit = "50" alt = "" />

</ a >

</ div >

< button grade = "navbar-toggler" type = "push button"

data-toggle = "plummet" data-target

= "#bs-example-navbar-plummet-1"

aria-controls = "bs-example-navbar-collapse-ane"

aria-expanded = "false"

aria-label = "Toggle navigation" >

< span class = "navbar-toggler-icon" ></ span >

</ button >

< div grade = "collapse navbar-collapse"

id = "bs-case-navbar-plummet-one" >

< ul class = "navbar-nav ml-auto" >

< li form = "nav-detail" >

< a class = "nav-link" href = "#" >

Domicile< span course = "sr-only" >(current)</ span >

</ a >

</ li >

< li class = "nav-item" >

< a class = "nav-link" href = "#" >Item1</ a >

</ li >

< li form = "nav-item" >

< a class = "nav-link" href = "#" >Item2</ a >

</ li >

< li grade = "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 >

</ torso >

</ 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 tin can image in the center of a responsive navbar.