My Bootstrap Navi Bar doesn't look like it should-CodePudding

My Navi bar seems awkward. I just implemented the right Bootstrap CSS Link, Font awesome link and also bootstrap js link. However the navigation bar looks not fine. The search button should be on the far right.

how should it look like; enter image description here,
how should it looks like now; enter image description here

My php code;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecommerce Website</title>
    <!--Bootstrap CSS Link-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    <!--Font awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div >
        <nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>

  <div  id="navbarSupportedContent">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Link</a>
      </li>
      <li >
        <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div  aria-labelledby="navbarDropdown">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <div ></div>
          <a  href="#">Something else here</a>
        </div>
      </li>
      <li >
        <a  href="#">Disabled</a>
      </li>
    </ul>
    <form >
      <input  type="search" placeholder="Search" aria-label="Search">
      <button  type="submit">Search</button>
    </form>
  </div>
</nav>
    </div>
  



    <!--bootstrap js link-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


</body>
</html>

Search button is not in the right position. The nav bar i just copied from Boot Strap.

CodePudding user response：

The bootstrap version you're using is Bootstrap 5. You've to use bootstrap 4.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">