Forms Bootstrap

There are three types of Forms Bootstrap:

1. Vertical Layout
2. Inline Layout
3. Horizontal Layout

 

1. Vertical Layout:

This is a basic layout of form. All inputs must be placed within <form> tag. Labels and input controls need to be written in <div> with class “.form-group” applied. “.form-control” class should be applied to inputs.

Example:

<div class="container">
    <form role="form">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="txtname" placeholder="Please Enter Name" />
        </div>
        <div class="form-group">
            <label for="inputfile">Upload File:</label>
            <input type="file" id="btnfileupload" />
        </div>
        <button type="submit" class="btn btn-default">Save</button>
    </form>
</div>

OUTPUT:

2. Inline Layout:

All elements’ alignment is inline and from left direction. Apply “.form-inline” class to <form> element.

Apply “.sr-only” class to labels. It will hide them.

Example:

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="name">Name:</label>
            <input type="text" class="form-control" id="txtname" placeholder="Please Enter Name" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputfile">Upload File:</label>
            <input type="file" id="btnfileupload" />
        </div>
        <button type="submit" class="btn btn-default">Save</button>
    </form>
</div>

OUTPUT:

3. Horizontal Layout:

Consider below element, class pair and apply accordingly.
<form> → “.form-horizontal”
<div> → “.form-group”
<label> → “.control-label”

Example:

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="control-label col-sm-2" for="name">Name:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="txtname" placeholder="Please Enter Name" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="inputfile">Upload File:</label>
            <div class="col-sm-10">
                <input type="file" id="btnfileupload" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </div>
    </form>
</div>

OUTPUT: