Recently got my hands on the Bootstrap 4 Dashboard template and decided to enhance it by adding a form to the top search bar. However, I encountered an issue where the search bar shrinks and loses its original design.
If you want to check out the Bootstrap 4 Dashboard template, you can find it here.
I suspect that the problem lies within the html/CSS code, but I'm struggling to find a solution that won't compromise the overall design. I'm not very well-versed in the new CSS features introduced in Bootstrap 4.
I attempted the following code snippet, but as mentioned earlier, the form ends up being centered and shrunk:
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
<form action="search.php" method="POST">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</nav>