Learning Bootstrap 4 - Second Edition

Creating an inline form

Let's start by learning how to create an inline form. This is a layout you might want to use in the header of a project or perhaps for a login page. In this case, we're going to align the fields and buttons of the form vertically across the page. For this example, let's create a simple login form with the following code:

<form class="form-inline"> 
  <div class="form-group"> 
    <label>Name</label> 
    <input type="text" class="form-control" placeholder="Mike Smith"> 
  </div> 
  <div class="form-group"> 
    <label>Email</label> 
    <input type="email" class="form-control" placeholder="[e-mail]"> 
  </div> 
  <button type="submit" class="btn btn-primary">Login</button> 
</form> 

There are a few things going on in this form, so let me explain them ...