Bootstrap Forms

Bootstrap provides three different types of form layouts:

  • Vertical Form (default form layout)

  • Horizontal Form

  • Inline Form

​

Vertical Form

This is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup.

​

Ex.

<!-- add here bootstrap header link file which is in second tutorial, copy and paste here -->

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form action="/examples/actions/confirmation.php" method="post">

        <div class="form-group">

            <label for="inputEmail">Email</label>

            <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>

        </div>

        <div class="form-group">

            <label for="inputPassword">Password</label>

            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>

        </div>

        <div class="checkbox">

            <label><input type="checkbox"> Remember me</label>

        </div>

        <button type="submit" class="btn btn-primary">Login</button>

    </form>

</div>

</body>

 

Horizontal Form

To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid classes to specify the width of your labels and controls.

apply the class .col-form-label on the <label> elements, so that they're vertically centered with their associated form controls. Let's check out an example:

 

Ex.

<!-- add here bootstrap header link file -->

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form action="/examples/actions/index.php" method="post">

        <div class="form-group row">

            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>

            </div>

        </div>

        <div class="form-group row">

            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>

            <div class="col-sm-10">

                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-sm-10 offset-sm-2">

                <label class="form-check-label"><input type="checkbox"> Remember me</label>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-sm-10 offset-sm-2">

                <button type="submit" class="btn btn-primary">Sign in</button>

            </div>

        </div>

    </form>

</div>

</body>

 

 

Inline Form

You can do this easily by adding the class .form-inline to the <form> element. However, form controls only appear inline in viewports that are at least 576px wide.

 

Ex.

<!-- add here bootstrap header link file -->

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form class="form-inline" action="/examples/actions/index.php" method="post">

        <div class="form-group mr-2">

            <label class="sr-only" for="inputEmail">Email</label>

            <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>

        </div>

        <div class="form-group mr-2">

            <label class="sr-only" for="inputPassword">Password</label>

            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>

        </div>

        <div class="form-group mr-2">       

            <label><input type="checkbox" class="mr-1"> Remember me</label>

        </div>

        <button type="submit" class="btn btn-primary">Sign in</button>

    </form>

</div>

</body>