I am having trouble using Bootstrap to position my logo alongside my website name. I opted for Bootstrap because I want it to adapt smoothly as the webpage's dimensions change, but I'm struggling to get it right. Since I'm new to Bootstrap, this issue might have a simple solution.
My goal is to achieve a look similar to this design: https://i.sstatic.net/nkXMc.png
Take a look at how there's a horse logo image next to NOMAD RIDES at the top of the webpage. Here is my current HTML:
<div id="container-fluid">
<div class="row justify-content-center" id="headerDiv">
<h1 class="col-4 align-middle">Nomad Rides</h1>
<img class="img-fluid col-2 align-middle" src="logo.png">
</div>
</div>
It appears fine on certain screen sizes. However, I would like to establish a maximum size for the logo and title. So, when the screen size reaches a minimum of 500px (such as when viewed on larger desktop screens), the text and image sizes should remain consistent. I understand that a media query is likely the solution, but I'm having trouble figuring it out.