Question Newbie Boostrap5 | Positioning Text and Logo Problem-CodePudding

I recently star boostrap5 with big enthusiasm and start watching tutorials. In this tutorial he is adding text right corner and place the logo left corner. I wrote same code but in my index.html i did not get same result. What i missing ?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<!---------------------------------- TOPBAR ---------------------------------->
<div >
  <div >
    <div >
      <p><a href=" 188888888">Call Us For Maintence Quickly!</a></p>
    </div>
  </div>
</div>
<!--------------------------------------------------------------------------->

<!---------------------------------- NAVBAR ---------------------------------->
<nav >
  <div ></div>
  <a href="index.html" ><img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle"></a>
</nav>
<!--------------------------------------------------------------------------->

CodePudding user response：

You seem to be getting Bootstrap v4 and v5 classes mixed up as well as your element nesting. For the top bar, you'd want something like:

<div >

if you plan to add additional columns to that container later. But the better option is likely:

<div >

For the navbar, your error is that the elements are outside and after the .container . You'd want either:

<nav >
  <div >
    <a><img></a>
  </div>
</nav>

or:

<nav >
  <a><img></a>
  <div ></div>
</nav>

...depending on what you're after. Neither of these are really the best way to structure a navbar or container, though. I'd highly recommend reading the documentation for version 5, as it's likely a much better resource. Note that your tutorial is for version 4, which is distinctly different.

CodePudding user response：

add a element inside the container ex:

 <nav >
        <div >
            <a href="index.html" >
               <img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle">
            </a>
        </div>
</nav>