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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self

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>
Try Your Self
Previous Next

Copyright 2023 by WebiBeris.com. All Rights Reserved.