Forms

All form controls automatically receive some global styling. Form elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example:

Source Code:

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail" class="form-control-label"><span class="required-label">*</span> Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
    </div>

<div class="form-group">
        <label for="exampleInputPassword" class="form-control-label"><span class="required-label">*</span> Password</label>
        <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
    </div>

<label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile" class="form-control-file">
        <small class="form-text text-muted">
            Example block-level help text here.
        </small>
    </div>

<div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                Check me out
            </label>
        </div>
    </div>

<button type="submit" class="btn btn-default">Submit</button>
</form>

Sample contact form:

Source Code:

Form states and sizes:

First name

Disabled.

Last name

Looks Good.

Username

Please choose a username.

Email

Phone

Password

Source Code:

<div class="form-row">
    <div class="col-md-4 mb-3">
        <label for="validationFirstName">First name</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="ca-gov-icon-person"></i></span>
            </div>
            <input type="text" class="form-control" id="validationFirstName" placeholder="First name" value="Mark" disabled>

</div>
        <div class="feedback text-muted">
            <small>Disabled.</small>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <label for="validationServerLastName">Last name</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text is-valid"><i class="ca-gov-icon-person"></i></span>
            </div>
            <input type="text" class="form-control is-valid" id="validationServerLastName" placeholder="Last Name" aria-describedby="inputGroupPrepend3" required>
            <div class="valid-feedback">
                Looks Good.
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <label for="validationServerUsername">Username</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text is-invalid"><i class="ca-gov-icon-person"></i></span>
            </div>
            <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
</div>
<div class="form-group row">
    <label for="inputPhone" class="col-sm-2 form-control-label">Phone</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control" id="inputPhone" placeholder="Phone">
    </div>
</div>

<div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
</div>

Custom file input:

Choose file...

Bootstrap 4 custom file input.

Source Code:

<div class="m-b">
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        <input class="hidden-up pos-abs" name="radInline1_1" checked="" type="radio">
        <div class="check-icon-radio">
            <i></i>
        </div>
        USA
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        <input class="hidden-up  pos-abs" name="radInline1_1" type="radio">
        <div class="check-icon-radio">
            <i></i>
        </div>
        Canada
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        <input class="hidden-up pos-abs" name="radInline1_1" type="radio">
        <div class="check-icon-radio">
            <i></i>
        </div>
        United Kingdom
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        <input class="hidden-up pos-abs" name="radInline1_1" type="radio">
        <div class="check-icon-radio">
            <i></i>
        </div>
        Sweden
    </label>
</div>

<div class="m-b">
    <label class="check">
        <input class="hidden-up pos-abs top-0 left-0" name="radGroupBtn1_1"  checked="" type="radio">
        <span class="btn btn-lg btn-block bg-highlight--checked rounded-0">Italy</span>
    </label>

<div class="m-b">
    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
    </div>
</div>

<div class="m-b">
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        <input class="hidden-up pos-abs" type="checkbox">
        <div class="check-icon-checkbox">
            <i class="ca-gov-icon-check-mark"></i>
        </div>
        USA
    </label>

<div class="m-b">
    <label class="check">
        <input class="hidden-up pos-abs top-0 left-0" checked="" type="checkbox">
        <span class="btn btn-md btn-block color-white--checked bg-primary--checked rounded-0">Canada</span>
    </label>

<label class="check">
        <input class="hidden-up pos-abs top-0 left-0" type="checkbox">
        <span class="btn btn-md btn-block color-white--checked bg-primary--checked rounded-0">Mexico</span>
    </label>
</div>

<div class="m-b">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>
</div>

Forms

Example:

Source Code:

Sample contact form:

Source Code:

Form states and sizes:

Source Code:

Custom file input:

Source Code:

Custom radio buttons and checkboxes:

Source Code:

Custom select:

Source Code: