How to place logo image , phone, location above navbar in bootstrap? - html

Question

I am new to Bootstrap: I want to place logo image, location image with address, phone number with text above the navigation. Logo details should be centered.
What I have tried:
<header >
<div class="container ">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<img class="img-fluid" style="max-width: 50%;" src="images/logo.png" alt="logo">
<img class="img-fluid" style="max-width: 5%" src="images/header-address.png" alt="logo">
<span class="span-text">1234 Abcd Efg <br> HI jk Lm,123466 </span>
<img class="img-fluid" style="max-width: 5%;" src="images/header-phone.png" alt="logo">
<span class="span_text">[phone] <br> Call Us </span>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</header>
<section >
<div class="container mx-auto">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">GALLERY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav></div>
</div>
</section>
The alignment of the logo, location, and phone number is not achieved.
How to fix this?

Answer 1

Use margin: 0 auto; for .col-md-6
.col-md-6 {
flex: 0 0 auto;
width: 50%;
text-align: center;
}
and if you want to also center the navigation items then add this:
.navbar-expand-lg .navbar-nav {
flex-direction: row;
margin: 0 auto;
}
Top Phone number... centered:
Nav Items centered:
Both centered with text-align