Documentation

<div class="bd-example">
    <div class="form-group form-group-alt">
        <input type="text" class="form-control" placeholder="Enter Text">
    </div>
    <div class="form-group input-group form-group-alt">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1">
    </div>
    <div class="form-group input-group form-group-alt">
        <input type="text" class="form-control" placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-text" id="basic-addon2">@</span>
    </div>
    <div class="form-group form-group-alt">
        <input type="text" class="form-control is-valid" placeholder="Enter Text">
    </div>
    <div class="form-group form-group-alt">
        <input type="text" class="form-control is-invalid" placeholder="Enter Text">
    </div>
    <div class="form-group">
        <input type="text" class="form-control is-valid" placeholder="Enter Text">
    </div>
    <div class="form-group">
        <input type="text" class="form-control is-invalid" placeholder="Enter Text">
    </div>
</div>