Styling Forms

Bootstrap provides elegant styling for forms with minimal effort.

Basic Form

<form>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" placeholder="Enter password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

Inline Form

<form class="form-inline">
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-default">Subscribe</button>
</form>

Horizontal Form

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Input Sizes

<input class="form-control input-lg" placeholder="Large">
<input class="form-control" placeholder="Default">
<input class="form-control input-sm" placeholder="Small">

Validation States

<div class="form-group has-success">
    <label>Valid</label>
    <input type="text" class="form-control">
</div>
<div class="form-group has-error">
    <label>Error</label>
    <input type="text" class="form-control">
    <span class="help-block">This field is required</span>
</div>