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!