How to align bootstrap navbar text with image?

Question

I'm using bootstrap navbar and I inserted an image to the navbar branding but due to the size it messes up the alignment. I want the text that goes with it to be aligned with the middle of it, but I don't know how to get the other button text to be aligned with it too.

This is what the output looks like

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

I tried using alignment on the navigation items but no matter what I do it doesn't change anything, this is my first time using bootstrap and my html knowledge is limited so I have no idea what to do Do:(< /p>

Answer 1

Not sure what's wrong with your implementation. I tried wrapping your snippet with a navigation container as mentioned in the bootstrap documentation and it looked good:

a.nav-item {
  color: white;
}

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

sssccc
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


  
     Jefferson Robotics
  Underwater
  Aerial
  Land

Maybe you're just missing that wrapper? Or maybe you didn't include bootstrap's styles in the static styles of your HTML file?

Answer 2

You can try using the in bootstrap on all <a> tags on the parent element as well as the navbar-brand <a> tag d-flexalign-items-center class, as shown below. This will center the element vertically.

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  
     Jefferson Robotics
  Underwater
  Aerial
  Land