Bootstrap Forms

Bootstrap provides three types of form layout. Vertical form, Horizontal form and Inline form.

Bootstrap Vertical Form

Code Structure
<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <label for="email">Email Address:</label>
            <input type="email" id="email" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">Login</button>
    </form>
</div>

Bootstrap Inline Form

Code Structure
<div class="container">
    <form action="#" role="form" class="form-inline">
        <div class="form-group">
            <label for="email">Email Address:</label>
            <input type="email" id="email" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">Login</button>
    </form>
</div>

Bootstrap Form without Label

Code Structure
<div class="container">
    <form action="#" role="form" class="form-inline">
        <div class="form-group">
            <label for="email" class="sr-only">Email Address:</label>
            <input type="email" id="email" class="form-control" placeholder="Enter Email">
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password:</label>
            <input type="password" id="password" class="form-control" placeholder="Enter Password">
        </div>
        <button type="submit" class="btn btn-default">Login</button>
    </form>
</div>

Bootstrap Horizontal Form

Code Structure
<div class="container">
    <form action="#" role="form" class="form-horizontal">
        <div class="form-group">
            <label for="email" class="control-label col-sm-2">Email Address:</label>
            <div class="col-sm-10">
                <input type="email" id="email" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-sm-2">Password:</label>
            <div class="col-sm-10">
                <input type="password" id="password" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label><input type="checkbox">Remember me</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Login</button>
            </div>
        </div>
    </form>
</div>

Share this

Related Posts