Easily positioning inline forms

In this recipe, we will position an inline form in the center of the viewport, on the left, and on the right. To achieve that, we will be using flexbox classes of justify-content-center, justify-content-start, and justify-content-end.

Getting ready

To get acquainted with how forms work, navigate to the forms component section of the Bootstrap documentation at https://v4-alpha.getbootstrap.com/components/forms/.

How to do it…

1. Open the currently empty file located at chapter4/start/app/recipe04-09.ejs, and add the following code:

<div class="container-fluid">

 <div class="mt-5">
 <h1><%- title %></h1>
 <p><a href="https://v4-alpha.getbootstrap.com/components/forms/" 
   target="_blank">Link to bootstrap forms docs</a></p>
 </div>

</div><!-- /.container --> 

2. In the same file, add the following code to the bottom to position the first form in the center:

<div class="container-fluid mt-5">...