Aligning searchbar to the right in bootstrap 5-CodePudding

Is it possible to have the searchbar in the bootstrap navbar to be fixed to the right side of the screen or would that go against it's flexibility? I'd like it to stay at the rightmost side of the screen regardless of the amount of links in my navbar. I'm a beginner to both css and bootstrap so I was unsure if I should edit the size in the class section of the element or override it in css. I've managed to modify other aspects of the navbar but I can't seem to move the search bar one bit. I assume it's since d-flex makes it next to the previous element.

#navbarDog{
    background-color: #F5EFE6;
}

#logo{
    height: 100px;
}
.nav-link{
    font-size: 20px;
    transition: font-size 0.4s;
}
.nav-link:hover{
    font-size: 25px;
}
.header-products {
    display: flex;
    align-items: center;
    justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox excersice - Fibonacci Flexbox</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
        crossorigin="anonymous"></script>
</head>

<body>
    <nav  id="navbarDog">
        <div >
            <a  href="index.html" ><img src="../img/logo.png" alt="" id="logo"></a>
            <button  type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarSupportedContent">
                <ul >
                    <li >
                        <a  aria-current="page" href="index.html">Home</a>
                    </li>
                    <li >
                        <a  href="products.html">Products</a>
                    </li>
                    <li >
                        <a  href="news.html">News</a>
                    </li>
                    <li >
                        <a  href="about.html">About</a>
                    </li>                 
                <form >
                    <input  type="search" placeholder="Search" aria-label="Search">
                    <button  type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    <header >
        <h1>Products</h1>
    </header>
    <main>
        <div >
            <img src="" alt="">
        </div>
        <p>Feel free to purchase one of our t-shirts, your money will go to save even more dogs</p>
    </main>




</body>

CodePudding user response：

The problem is with the width of your navbar, just replace me-auto with w-100 and give the search bar ms-auto to push it to the right.

    <ul >
               .
               .      
               .          
       <form >
           <input  type="search" placeholder="Search" aria-label="Search">
           <button  type="submit">Search</button>
       </form>