Form control

Use .form-control-solid class alongside with .form-control to set solid background style for a form control and .form-control-transparent for transparent background.

<input type="text" class="form-control" placeholder="..."/>
<input type="text" class="form-control form-control-solid" placeholder="..."/>
<input type="text" class="form-control form-control-transparent" placeholder="..."/>

Form select

Use .form-select-solid class alongside with .form-select to set solid background style for a form select and .form-select-transparent for transparent background.

<select class="form-select" aria-label="Select example">
    <option>Select example</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-solid" aria-label="Select example">
    <option>Select example</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-transparent" aria-label="Select example">
    <option>Select example</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Input group solid

Use .input-group-solid alongside with .input-group for solid input group background.

@ 
<div class="input-group input-group-solid mb-3">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Form check variants

Use .form-check-{color} alongside with .form-check to get multiple colored backgrounds for form check.

<div class="form-check form-check-success">
    <input checked class="form-check-input" type="checkbox" value="" id="flexCheckSuccess"/>
    <label class="form-check-label" for="flexCheckSuccess">
        Success checkbox
    </label>
</div>

<div class="form-check form-check-danger">
    <input checked class="form-check-input" type="checkbox" value="" id="flexCheckDanger"/>
    <label class="form-check-label" for="flexCheckDanger">
        Danger checkbox
    </label>
</div>

<div class="form-check form-check-warning">
    <input checked class="form-check-input" type="checkbox" value="" id="flexCheckWarning"/>
    <label class="form-check-label" for="flexCheckWarning">
        Warning checkbox
    </label>
</div>

<div class="form-check form-check-info">
    <input checked class="form-check-input" type="checkbox" value="" id="flexCheckInfo"/>
    <label class="form-check-label" for="flexCheckInfo">
        Info checkbox
    </label>
</div>