I've created a simple test navbar with a search input box and search button using the Bootstrap class form-inline
. However, the search button is appearing below the search input, even though there is enough space available.
You can view the codepen here to test it out. The HTML code for this is as follows:
<!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>Nav</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c57495749541b1c0d184b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<a href="#none" class="navbar-brand">MarcaX</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#expand">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="expand">
<div class="navbar-nav">
<a href="#link1" class="nav-item nav-link">Link1</a>
<a href="#link2" class="nav-item nav-link">Link2</a>
<a href="#link3" class="nav-item nav-link">Link3</a>
</div>
<form class="form-inline ms-auto">
<input class="form-control mr-sm-2" type="search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The search button should stay within the form tag without the need for additional CSS.