Elements: Forms

<form>

    <!-- Form Group -->
    <div class="form-group">
        <label for="frm-01-login">Login</label>
        <input id="frm-01-login" type="text" class="form-control">
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <!-- /Form Group -->

    <!-- Form Group -->
    <div class="form-group">
        <label for="frm-01-password">Password</label>
        <input id="frm-01-password" type="password" class="form-control">
    </div>
    <!-- /Form Group -->

    <!-- Checkbox Form Group -->
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="frm-01-remember">
        <label class="form-check-label" for="frm-01-remember">Remember me</label>
    </div>
    <!-- /Checkbox Form Group -->

    <!-- Send Message Button -->
    <button type="submit" class="btn btn-primary text-uppercase btn-strong">Login</button>
    <!-- /Send Message Button -->

</form>

<!-- Large -->
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<!-- /Large -->

<!-- Normal -->
<input class="form-control" type="text" placeholder=".form-control">
<select class="form-control">
    <option>Normal select</option>
</select>
<!-- /Normal -->

<!-- Small -->
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>
<!-- /Small -->

<form>

    <!-- Form Group -->
    <div class="form-group row d-flex align-items-center">
        <label for="frm-02-login" class="col-lg-2 m-0">Login</label>
        <div class="col-lg-10">
            <input id="frm-02-login" type="text" class="form-control">
        </div>
    </div>
    <!-- /Form Group -->

    <!-- Form Group -->
    <div class="form-group row d-flex align-items-center">
        <label for="frm-02-password" class="col-lg-2 m-0">Password</label>
        <div class="col-lg-10">
            <input id="frm-02-password" type="password" class="form-control">
        </div>
    </div>
    <!-- /Form Group -->

    <!-- Grid Alignment -->
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-10">

            <!-- Checkbox Form Group -->
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="frm-02-remember">
                <label class="form-check-label" for="frm-02-remember">Remember me</label>
            </div>
            <!-- /Checkbox Form Group -->

            <!-- Send Message Button -->
            <button type="submit" class="btn btn-primary text-uppercase btn-strong">Login</button>
            <!-- /Send Message Button -->

        </div>
    </div>
    <!-- /Grid Alignment -->

</form>

<!-- Input Group -->
<div class="input-group mb-2">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group mb-2">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group mb-2">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">.00</span>
    </div>
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group mb-2">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="checkbox" aria-label="Checkbox for following text input">
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group mb-2">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="radio" aria-label="Radio button for following text input">
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group mb-2">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
    </div>
</div>
<!-- /Input Group -->

<!-- Input Group -->
<div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</div>
<!-- /Input Group -->