Create an Inline Form with Bootstrap

Recently, I started working on a project and was in need of an inline form. I wanted a simple search box and a search submit button. I checked out what Bootstrap had to offer and tweaked to simplify. I created a container to hold my form and centered that within the page. Then I added label, input, and button tags to create my basic setup.

<div class="container">
  <div class="row">
    <div class="col-xl-4 text-center">
      <form class="form-inline">
        <label class="sr-only">Search</label>
        <input class="form-control mr-2 mb-sm-0 mb-2" type="text" 
          placeholder="Search..." ></input>
        <button class="btn btn-outline-primary">
          <i class="fa fa-search fa-lg">
        </button>
      </form>
    </div>
  </div>
</div>

For the label, I added the “sr-only” class so it wasn’t visible on the page, but still exists.

For the input, I used the “form-control” class to give it some style with rounded corners and the “mr-2” class to add a small space between the input box and the search button. For the mobile view, I used “mb-sm-0” and “mb-2” to add a small bottom margin when the inline form breaks into one column. I also added placeholder text that displays “Search…” in the input box.

For the button, I gave it the “btn” and “btn-outline-primary” classes to style it and added the Font Awesome search icon in the button instead of text.

Check out my Codepen here!