how to set navigation bar to the left using bootstrap?-CodePudding

I am trying to create a navigation bar for my website using bootstrap 5. The problem is I want to make my bar move to the left by using the class margin left auto (ml-auto). I do not know exactly why it did not work for me. Could you help me to figure out the reason, please? Thank you so much!

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kim Phan</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
    <nav > <!-- make the nav bar size, nav bar font color, navbar background color-->
        <a  href="">tindog</a> <!--brand color logo-->
        <ul >
            <li > 
                <a href=""> Contact</a>
             </li>
             <li > 
                <a href=""> Pricing</a>
             </li>
             <li > 
                <a href=""> Download</a>
             </li>
        </ul>
        
    </nav>
</body>

My current navigation bar image

CodePudding user response：

From the question it is not completely clear, what you are trying to achieve. Do I understand it well, that you want to place the navigation on the very left side of the top bar?

If so, it is not that much about ml-auto class, but maily because the space is already occupied by the .navbar-brand element.

Not sure whether I understand it well, but if you are trying to interchange those two elements, you need to put .navbar-brand under .navbar-nav in the code.

<ul >
  <li >
     <a  href=""> Contact</a>
   </li>
   <li >
     <a  href=""> Pricing</a>
   </li>
   <li >
     <a  href=""> Download</a>
   </li>
</ul>
<a  href="">tindog</a> <!--brand color logo-->

CodePudding user response：

You can no longer set margins with ml.auto or mr.auto in Bootstrap v5. They are replaced by ms.auto and me.auto.

"ms" and "me" stand for "margin start" and "margin end."

[Auto margins from Bootstrap v5.1 documentation] https://getbootstrap.com/docs/5.1/utilities/flex/#auto-margins

<nav >
    <a  href="">tindog</a>
    <ul >
        <li > 
            <a  href="#">Contact</a>
         </li>
         <li > 
            <a href="#">Pricing</a>
         </li>
         <li > 
            <a  href="#">Download</a>
         </li>
    </ul>
</nav>

CodePudding user response：

you are using your brand name inside the navbar class that's why the brand name is aligned in the left of navbar. instead of that you can give your brand name in separete div element. After that your ml-auto attribute will work.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kim Phan</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div>
<a  href="">tindog</a> <!--brand color logo-->
</div>
<div >

  <a href="">Conanct</a>
  <a href="#">Pricing</a>
  <a href="#">Download</a>
</div>
        
        
</body>