Is there a way to make the search bar shrink on mobile view while keeping everything in line? Currently, the button is wrapping underneath the search bar.
Check out the solution on JSFiddle
body {
margin: 10px;
}
.navbar-container {
display: flex;
align-items: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-faded">
<div class="container navbar-container">
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<form class="form-inline ">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-outline-success btn-sm" type="submit">Go</button>
</form>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>