Solution 1 :

#navbarMenu .form-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

… should do the trick.

or, using Bootstrap flex utility classes:

<form class="d-flex align-items-center flex-nowrap">

But, to also resolve the border-radius issue, you might want to change your markup to:

<form class="form-inline my-2 my-lg-0">
  <div class="input-group">
    <input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
    <div class="input-group-append">
       <button class="btn btn-outline-light" type="submit">Search</button>

Solution 2 :

Make sure the <button> is display:inline-block. And your input has max-width:100% instead of width:100%.

Also your .ap-dropdown-menu isn’t Z-indexed properly above the map.

Solution 3 :

using Bootstrap:

wrap your <span> where search is and button with <div class="d-flex"></div>, and add to <span> class mr-2 for space you want.

Should be something like this:

<div class="d-flex">
<span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>



Problem :

I’m building a little website (link) which displays a search bar in the navigation bar. I’m using Bootstrap 4 for the navigation bar controls, and Algolia Places for the search bar HTML input element. The problem is that I cannot align the search bar with the search button, even though I’m using form-inline. Also, the search results displayed when typing something in the search bar get cut off.

enter image description here

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a href="/" class="navbar-brand">Drinking Fountains</a>

  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span> 

  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/">Map
          <span class="sr-only">(current)</span>
      <li class="nav-item">
        <a class="nav-link" href="/faq">FAQ</a>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>

    <form class="form-inline my-2 my-lg-0">
      <input class="mr-sm-2"  id="address-bar" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>


Comment posted by Cesare

Thank you. Do you know how to add a little spacing between the search bar and button?

Comment posted by spacing utilities here

@Cesare, you can either give the button

Comment posted by Cesare

I’ll accept because of the CSS at the top, but the HTML in your updated answer isn’t fixing the alignment on my side.

Comment posted by tao

Show me what alignment issue you have and I’ll tell you how to fix it.

Comment posted by Cesare

I think you forgot to close the form tag