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.
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/.
- 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 -->
- 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">...