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="[email protected]"> </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 for you:
For inline forms, we need to add a CSS class named
.form-inline
to...