CODEWITHSUNDEEP
htmlimagebootstrap-5
Elizabeth Vallejo
Elizabeth Vallejo

Reputation: 23

How do I center a image within a bootstrap navbar?

I used a navbar bootstrap code that contains a search bar and a logo. I used one of my images as my logo and made the search bar longer but my problem is that I want my img/logo to be centered. I tired to create a class with the img. For example <img class"justify-content-center" src="" alt"">. I also tried align content but for some reason my image doesn't move at all. Lastly,I tried removing float in CSS because I assumed the logo is floated by default but still no change Here is my code and image of result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-email-vallejo</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body> 

 <nav class="navbar bg-body-tertiary">
        <div class="container-fluid" style="background-color: black;">
          <a class="navbar-brand"> <img class="img-responsive center-block" src="paperplane-4 copy.png" alt=""  width="100" height="40"></a>
          <form class="w-100 p-3" role="search">
            <input class="form-control me-2" type="search" placeholder="Search Your Mail" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav> 

 


  <div class="container">
  <div class="row">
  <div class="col"
  style="border: 1px solid red;">
  Column 1
  </div>


    <div class="col"
    style="border: 1px solid green;">
    Column 2
    </div>
     <div class="col" style="border: 1px solid orange;">
     Column 3
     </div>


 
</body>
</html>
,,,

Here is the image of the result:
[![enter image description here](https://i.sstatic.net/NbAyM.png)](https://i.sstatic.net/NbAyM.png)

Upvotes: 0

Views: 220

Answers (2)

Gagobert
Gagobert

Reputation: 21

You see, you're getting settings overwritten from the imported external stylesheet in:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

i suggest rearranging stylesheets in your html header as in: stackoverflow - prioritizing stylesheets

or create your own styling for the whole navbar.

Upvotes: 1

redrubycorn
redrubycorn

Reputation: 71

it centers it if you add auto margin like this (if that is what you are going for):

    <nav class="navbar bg-body-tertiary">
        <div class="container-fluid" style="background-color: black;">
            <a class="navbar-brand mx-auto" href="#">
                <img class="img-responsive" src="images/50x50.png" alt=""  width="100" height="40">
            </a>
            <form class="w-100 p-3" role="search">
                <input class="form-control me-2" type="search" placeholder="Search Your Mail" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>

enter image description here

Upvotes: 2

Related Questions