Forms

Form group

Wrapping controls in .form-group gives them a margin at the bottom.

Label

<div class="form-group">
    <label>Label</label>
    <input type="text" class="form-control">
</div>

Inline

Make elements appear inline by giving the form or maste div a class of form-inline.

Name:

I agree

<div class="form-inline">
    <label class="mr-2" for="formControlInline1">Name:</label>
    <input type="text" class="form-control mr-2" value="Dwight Schrute" id="formControlInline1">

    <div class="form-select mr-2">
        <select class="form-control">
            <option>Beets</option>
            <option>Bears</option>
            <option>Battlestar Galactica</option>
        </select>
    </div>

    <div class="form-checkbox mr-2">
        <input type="checkbox" id="checkboxInline1" class="form-control-checkbox">
        <label for="checkboxInline1" class="form-label-checkbox">I agree</label>
    </div>

    <button class="btn btn-primary">Save</button>
</div>

Input

Inputs are column-styled (label over input) as default but can be row-styled (label to the left of input) using the .row and .col-* classes. Note that the .col-form-label class must be used on the label to align it vertically.

When using the sizing classes in the inputs, the corresponding sizing class has to be assigned o the label (.col-form-label-sm / -lg).

Label

<div class="form-group">
    <label for="input1">Label</label>
    <input type="text" class="form-control" id="input1" value="Input">
</div>

<div class="form-group">
    <input type="text" class="form-control" id="input1" value="Disabled input" disabled>
</div>

<div class="form-group row">
    <label for="input2" class="col-2 col-form-label-sm">Label</label>
    <div class="col-10">
        <input type="text" class="form-control form-control-sm" id="input2" value="Input">
    </div>
</div>

<div class="form-group row">
    <label for="input2" class="col-2 col-form-label">Label</label>
    <div class="col-10">
        <input type="text" class="form-control" id="input2" value="Input">
    </div>
</div>

<div class="form-group mb-0 row">
    <label for="input2" class="col-2 col-form-label-lg">Label</label>
    <div class="col-10">
        <input type="text" class="form-control form-control-lg" id="input2" value="Input">
    </div>
</div>

Sizing

<input type="text" class="form-control form-control-sm" id="input1" value="Small input">
<input type="text" class="form-control" id="input1" value="Default input">
<input type="text" class="form-control form-control-lg" id="input1" value="Large input">

Textarea

Label

<label for="textarea">Label</label>
<textarea class="form-control" id="textarea" placeholder="This is a textarea..."></textarea>

Checkbox and radio

Default checkbox

Disabled checkbox

Default radio 1

Default radio 2

Disabled radio

<div class="form-group">
    <div class="form-checkbox">
        <input type="checkbox" id="checkboxExample1" class="form-control-checkbox" checked>
        <label for="checkboxExample1" class="form-label-checkbox">Default checkbox</label>
    </div>
    <div class="form-checkbox">
        <input type="checkbox" id="checkboxExample2" class="form-control-checkbox" disabled>
        <label for="checkboxExample2" class="form-label-checkbox">Disabled checkbox</label>
    </div>
</div>

<div class="form-group mb-0">
    <div class="form-radio">
        <input type="radio" name="radioExample" id="radioExample1" class="form-control-radio" checked>
        <label for="radioExample1" class="form-label-radio">Default radio 1</label>
    </div>
    <div class="form-radio">
        <input type="radio" name="radioExample" id="radioExample2" class="form-control-radio">
        <label for="radioExample2" class="form-label-radio">Default radio 2</label>
    </div>
    <div class="form-radio">
        <input type="radio" name="radioExample" id="radioExample2" class="form-control-radio" disabled>
        <label for="radioExample2" class="form-label-radio">Disabled radio</label>
    </div>
</div>

Checkbox and radio inline

Default checkbox

Disabled checkbox

Default radio 1

Default radio 2

Disabled radio

<div class="form-group">
    <div class="form-checkbox form-control-inline">
        <input type="checkbox" id="checkboxInlineExample1" class="form-control-checkbox" checked>
        <label for="checkboxInlineExample1" class="form-label-checkbox">Default checkbox</label>
    </div>
    <div class="form-checkbox form-control-inline">
        <input type="checkbox" id="checkboxInlineExample2" class="form-control-checkbox" disabled>
        <label for="checkboxInlineExample2" class="form-label-checkbox">Disabled checkbox</label>
    </div>
</div>

<div class="form-group">
    <div class="form-radio form-control-inline">
        <input type="radio" name="radioInlineExample" id="radioInlineExample1" class="form-control-radio" checked>
        <label for="radioInlineExample1" class="form-label-radio">Deafult radio</label>
    </div>
    <div class="form-radio form-control-inline">
        <input type="radio" name="radioInlineExample" id="radioInlineExample2" class="form-control-radio">
        <label for="radioInlineExample2" class="form-label-radio">Default radio</label>
    </div>
    <div class="form-radio form-control-inline">
        <input type="radio" name="radioInlineExample" id="radioInlineExample3" class="form-control-radio" disabled>
        <label for="radioInlineExample3" class="form-label-radio">Disabled radio</label>
    </div>
</div>

Switches

Default switch

Disabled switch

<div class="form-switch">
    <input type="checkbox" id="switchExample1" class="form-control-switch">
    <label for="switchExample1" class="form-label-switch">Default switch</label>
</div>

<div class="form-switch">
    <input type="checkbox" id="switchExample2" class="form-control-switch" disabled>
    <label for="switchExample2" class="form-label-switch">Disabled switch</label>
</div>

Select

Label

<div class="form-group">
    <label>Label</label>
    <div class="form-select">
        <select class="form-control form-control-sm">
            <option>Small select</option>
            <option>Option</option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="form-select">
        <select class="form-control">
            <option>Default select</option>
            <option>Option</option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="form-select">
        <select class="form-control form-control-lg">
            <option>Large select</option>
            <option>Option</option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="form-select">
        <select class="form-control" disabled>
            <option>Disabled select</option>
            <option>Option</option>
        </select>
    </div>
</div>

Validation

Add novalidate to the form-tag and required to the input elements that should be required.

Also, include the form-validation.php at the bottom of the page.

<form class="needs-validation" novalidate>

    <div class="form-group">
        <label for="input">Input</label>
        <input class="form-control" type="text" id="input" name="input" required>
        <div class="invalid-feedback">Invalid</div>
    </div>

    <div class="form-group">
        <textarea class="form-control" id="textarea" required></textarea>
        <div class="invalid-feedback">Invalid</div>
    </div>

    <div class="form-group">
        <div class="form-select">
            <select class="form-control" required>
                <option value="">Default select</option>
                <option value="1">Option</option>
            </select>
            <div class="invalid-feedback">Invalid</div>
        </div>
    </div>

    <div class="form-group">
        <div class="form-switch">
            <input type="checkbox" id="switchExample3" class="form-control form-control-switch" required>
            <label for="switchExample3" class="form-label-switch">Default switch</label>
            <div class="invalid-feedback">Invalid</div>
        </div>
    </div>

    <div class="form-group">
        <div class="form-checkbox">
            <input type="checkbox" id="checkboxInlineExample3" class="form-control-checkbox" required>
            <label for="checkboxInlineExample3" class="form-label-checkbox">Default checkbox</label>
            <div class="invalid-feedback">Invalid</div>
        </div>
    </div>

    <div class="form-group">
        <div class="form-radio">
            <input type="radio" name="radioInlineExample" id="radioInlineExample4" class="form-control-radio" required>
            <label for="radioInlineExample4" class="form-label-radio">Default radio 1</label>
        </div>
        <div class="form-radio">
            <input type="radio" name="radioInlineExample" id="radioInlineExample5" class="form-control-radio" required>
            <label for="radioInlineExample5" class="form-label-radio">Default radio 2</label>
            <div class="invalid-feedback">Invalid</div>
        </div>
    </div>

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

</form>

<!-- form-validation.php -->

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>