How to align bootstrap navigation bar text with image?-CodePudding

I am using bootstraps navigation bar and I inserted an image to the navbar brand yet because of the size it messes up the alignment. I want the text that goes along with it to line up with the middle of it like it is, yet I can't figure out how to get the other button text to line up with it as well.

This is what it looks like Output

<a class ="navbar-brand" id="home" href="/">
                    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60"  alt="">
                      Jefferson Robotics</a>
                <a  id="water" href="/underwater">Underwater</a>
                <a  id="sky" href="/aerial">Aerial</a>
                <a  id="earth" href="/land">Land</a>

I tried using alignments on the nav-items but it doesn't change anything no matter what I do, this is my first time using bootstrap and I have limited html knowledge so I am quite lost on what to do :(

CodePudding user response：

You can try using d-flex align-items-center classes from bootstrap on both parent element to all the <a> tags and also on the navbar-brand <a> tag like below. This will center the elements vertically.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <a  id="home" href="/">
    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60"  alt=""> Jefferson Robotics</a>
  <a  id="water" href="/underwater">Underwater</a>
  <a  id="sky" href="/aerial">Aerial</a>
  <a  id="earth" href="/land">Land</a>
</div>

CodePudding user response：

Not sure what's wrong with your implementation. I tried wrapping your code snippet with the nav container as mentioned in bootstrap's documentation and it looks fine:

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<nav >
  <a  id="home" href="/">
    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60"  alt=""> Jefferson Robotics</a>
  <a  id="water" href="/underwater">Underwater</a>
  <a  id="sky" href="/aerial">Aerial</a>
  <a  id="earth" href="/land">Land</a>
</nav>

maybe you were just missing that wrapper? or maybe you didn't include the styling for bootstrap in your static styles in you HTML file?