Bootstrap 3 Forms

Bootstrap's Default Settings

  • Individual form controls automatically receive some global styling.
  • All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.
  • Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap Form Layouts

Bootstrap's three types of form layouts:
  1. Vertical form ( Default )
  2. Horizontal form
  3. Inline form

Basic example - Vertical form ( Default )

Example

        <form>
                <div class="form-group">
                        <label for="email-1">Email</label>
                        <input type="email" class="form-control" id="email-1" placeholder="Email">
                </div>
                <div class="form-group">
                        <label for="password-1">Password</label>
                        <input type="password" class="form-control" id="password-1" placeholder="Password">
                </div>
                <div class="checkbox">
                        <label>
                        <input type="checkbox">
                        Remember me </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
        </form>
    

Inline form

Additional rules for a horizontal form:
  • Add class .form-inline to the <form> element

Example

        <form class="form-inline">
                <div class="form-group">
                        <label for="name-1">Name</label>
                        <input type="text" class="form-control" id="name-1" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                        <label for="email-1">Email</label>
                        <input type="email" class="form-control" id="email-1" placeholder="jane.doe@example.com">
                </div>
                <div class="checkbox">
                        <label>
                                <input type="checkbox">
                                Check me out 
                        </label>
                </div>
                <button type="submit" class="btn btn-default">Send</button>
        </form>
    

Tip: If you don't include a label for every input, screen readers will have trouble with your forms. You can hide the labels for all devices, except screen readers, by using the .sr-only class:

Example
       
        <form class="form-inline">
                <div class="form-group">
                        <label for="name-1" class="sr-only">Name</label>
                        <input type="text" class="form-control" id="name-1" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                        <label for="email-2" class="sr-only">Email</label>
                        <input type="email" class="form-control" id="email-2" placeholder="jane.doe@example.com">
                </div>
                <div class="checkbox">
                        <label>
                        <input type="checkbox">
                        Check me out </label>
                </div>
                <button type="submit" class="btn btn-default">Send</button>
        </form>
    

Tip: .input-group in Inline form like this:

Example
$
.00

        <form class="form-inline">
                <div class="form-group">
                        <label class="sr-only" for="amount-1">Amount (in dollars)</label>
                        <div class="input-group">
                                <div class="input-group-addon">$</div>
                                        <input type="text" class="form-control" id="amount-1" placeholder="Amount">
                                <div class="input-group-addon">.00</div>
                        </div>
                </div>
                <button type="submit" class="btn btn-primary">Pay Amount</button>
        </form>
    

Horizontal form

A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).

Additional rules for a horizontal form:
  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements

Example

        <form class="form-horizontal">
                <div class="form-group">
                        <label for="email-3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                                <input type="email" class="form-control" id="email-3" placeholder="Email">
                        </div>
                </div>
                <div class="form-group">
                        <label for="password-2" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                                <input type="password" class="form-control" id="password-2" placeholder="Password">
                        </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">Sign in</button>
                        </div>
                </div>
        </form>
    

Static control

When you need to place plain text next to a form label within a form, use the .form-control-static class on a

.

Example

email@example.com


        <form class="form-horizontal">
                <div class="form-group">
                        <label class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                                <p class="form-control-static">email@example.com</p>
                        </div>
                </div>
                <div class="form-group">
                        <label for="password-3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                                <input type="password" class="form-control" id="password-3" placeholder="Password">
                        </div>
                </div>
        </form>
    

Focus state

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Example

        <form> 
                <input class="form-control" id="focusedInput" value="Demonstrative focus state"> 
        </form>
    

Disabled state

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Example

        <form> 
                <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
        </form>
    

Readonly state

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Example

        <form> 
                <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
        </form>
    

Help text

Block level help text for form controls.

Example
A block of help text that breaks onto a new line and may extend beyond one line.

        <div class="form-group">
                <label for="inputHelpBlock">Input with help text</label>
                <input id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
        </div>
        <span class="help-block" id="helpBlock">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Example
A block of help text that breaks onto a new line and may extend beyond one line.

        <div class="form-group has-success">
                <label class="control-label" for="inputSuccess1">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
                <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form-group has-warning">
                <label class="control-label" for="inputWarning1">Input with warning</label>
                <input type="text" class="form-control" id="inputWarning1">
        </div>
        <div class="form-group has-error">
                <label class="control-label" for="inputError1">Input with error</label>
                <input type="text" class="form-control" id="inputError1">
        </div>
        <div class="has-success">
                <div class="checkbox">
                        <label>
                        <input type="checkbox" id="checkboxSuccess" value="option1">
                        Checkbox with success </label>
                </div>
        </div>
        <div class="has-warning">
                <div class="checkbox">
                        <label>
                        <input type="checkbox" id="checkboxWarning" value="option1">
                        Checkbox with warning </label>
                </div>
        </div>
        <div class="has-error">
                <div class="checkbox">
                        <label>
                        <input type="checkbox" id="checkboxError" value="option1">
                        Checkbox with error </label>
                </div>
        </div>
    

With optional icons

Example
(success)
(warning)
(error)
@
(success)

        <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess2">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
        </div>
        <div class="form-group has-warning has-feedback">
                <label class="control-label" for="inputWarning2">Input with warning</label>
                <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                <span id="inputWarning2Status" class="sr-only">(warning)</span>
        </div>
        <div class="form-group has-error has-feedback">
                <label class="control-label" for="inputError2">Input with error</label>
                <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                <span id="inputError2Status" class="sr-only">(error)</span>
        </div>
        <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
                <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
        </div>
    

Optional icons in horizontal and inline forms

Example
(success)
@
(success)

        <form class="form-horizontal">
                <div class="form-group has-success has-feedback">
                        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
                        <div class="col-sm-9">
                                <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
                                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                                <span id="inputSuccess3Status" class="sr-only">(success)</span>
                        </div>
                </div>
                <div class="form-group has-success has-feedback">
                        <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
                        <div class="col-sm-9">
                                <div class="input-group">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                                </div>
                                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                                <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
                        </div>
                </div>
        </form>
    

Example
(success)

@
(success)

        <form class="form-inline">
                <div class="form-group has-success has-feedback">
                        <label class="control-label" for="inputSuccess4">Input with success</label>
                        <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                        <span id="inputSuccess4Status" class="sr-only">(success)</span>
                </div>
        </form>
        <form class="form-inline">
                <div class="form-group has-success has-feedback">
                        <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
                        <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
                        </div>
                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                        <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
                </div>
        </form>
    

Optional icons with hidden .sr-only labels

If you use the .sr-only class to hide a form control's <label>, Bootstrap will automatically adjust the position of the icon once it's been added.

Example
(success)
@
(success)

        <div class="form-group has-success has-feedback">
                <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
                <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess5Status" class="sr-only">(success)</span>
        </div>
        <div class="form-group has-success has-feedback">
                <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
                <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
        </div>
    

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Example


        <form>
                <div class="controls">
                        <input class="form-control input-lg" placeholder=".input-lg">
                        <input class="form-control" placeholder="Default input">
                        <input class="form-control input-sm" placeholder=".input-sm">
                        <select class="form-control input-lg">
                                <option value="">.input-lg</option>
                        </select>
                        <select class="form-control">
                                <option value="">Default select</option>
                        </select>
                        <select class="form-control input-sm">
                                <option value="">.input-sm</option>
                        </select>
                </div>
        </form>
    

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

Example

        <form class="form-horizontal">
                <div class="form-group form-group-lg">
                        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
                        <div class="col-sm-10">
                                    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
                        </div>
                </div>
                <div class="form-group form-group-sm">
                        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
                        <div class="col-sm-10">
                                <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                        </div>
                </div>
        </form>
    

Copyright 2016 by WebiBeris.com. All Rights Reserved.