Position inline form next to navbar-brand in Bootstrap 4

Question

I am trying to position an inline form and navbar-brand next to each other (horizontally) on a bootstrap 4 navbar but instead they are vertically stacked.

The code I am using is below:

<nav class="navbar navbar-light bg-faded">
  <h1 class="navbar-brand">MyBrand</h1>
  <form class="form-inline">
    <button class="btn btn-sm btn-outline-success" type="button">This should be on the same line as the brand</button>
  </form>
</nav>

And I have a bootly demo here http://www.bootply.com/sOvVSY1TtM#

Welcome any help

Answer 1

Updated 2018

Bootstrap 4 navbar-toggleable-* has been replaced with navbar-expand-*.
Simply use navbar-expand for a Navbar that remains horizontal on all screen widths.

---

The Bootstrap 4 Navbar is now vertical (for mobile) by default. To override this, use navbar-toggleable-xl so that it remains horizontal...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
  <h1 class="navbar-brand">MyBrand</h1>
  <form class="">
    <button class="btn btn-sm btn-outline-success" type="button">New Note</button>
  </form>
</nav>

http://www.bootply.com/whbzZorNyy

---

Related: Bootstrap 4 Fixed top navbar shows collapsed and hides content