Currently, I have designed a navigation bar using Bootstrap 4.
My aim is to incorporate the search bar in line with the navigation bar. I have applied the 'form-inline' class to the search form, however, the search button still appears below the text box.
<nav class="navbar navbar-expand-sm navbar-dark bg-secondary fixed-top">
<!-- LOGO on left -->
<a class="navbar-brand" href="#">
<img src="../assets/DHI Logo Navbar.svg" alt="Diversified" style="width:70px;">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Links -->
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
<ul class="navbar-nav nav-pills">
<li class="nav-item">
<a href="index.php" class="nav-link">PDF Generator</a>
</li>
<li class="nav-item">
<a href="contacts.php" class="nav-link">Contacts</a>
</li>
<li class="nav-item">
<a href="inspectionLog.php" class="nav-link">Inspection Log</a>
</li>
</ul>
</div>
<form class="form-inline" action="inspectionLog.php">
<input type="text" class="form-control mr-sm-2" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
In my navigation setup, the logo is positioned on the left side, links aligned centrally, and the search bar is intended to be on the right side inline.
Can you identify any errors that could be causing the issue with achieving an in-line search bar?