<form>
    <div class="form-group">
        <label for="exampleInputText1">Text input</label>
        <input
            type="text"
            class="form-control"
            id="exampleInputText1"
            placeholder="Placeholder" />
    </div>
    <div class="form-group">
        <label for="exampleInputText2">Disabled</label>
        <input
            type="text"
            disabled
            class="form-control"
            id="exampleInputText2"
            placeholder="Disabled" />
    </div>
    <div class="form-group">
        <label for="exampleInputTextValid">Valid</label>
        <input
            type="text"
            class="form-control is-valid"
            id="exampleInputTextValid"
            placeholder="Valid"
            value="Valid" />
    </div>
    <div class="form-group">
        <label for="exampleInputTextInvalid">Invalid</label>
        <input
            type="text"
            class="form-control is-invalid"
            id="exampleInputTextInvalid"
            placeholder="Invalid"
            value="Invalid" />
    </div>
    <div class="form-group">
        <label for="exampleInputText3">Large, normal text</label>
        <input
            type="text"
            class="form-control form-control-lg"
            id="exampleInputText3"
            placeholder="Text input"
            value="Text input" />
    </div>
    <div class="form-group">
        <label for="exampleInputText3B">Large, large text</label>
        <input
            type="text"
            class="form-control form-control-lg form-control-text-lg"
            id="exampleInputText3B"
            placeholder="Text input"
            value="Text input" />
    </div>
    <div class="form-group">
        <label for="exampleInputText4">Small, normal text</label>
        <input
            type="text"
            class="form-control form-control-sm"
            id="exampleInputText4"
            placeholder="Text input"
            value="Text input" />
    </div>
    <div class="form-group">
        <label for="exampleInputText4B">Small, small text</label>
        <input
            type="text"
            class="form-control form-control-sm form-control-text-sm"
            id="exampleInputText4"
            placeholder="Text input"
            value="Text input" />
    </div>
    <div class="form-group">
        <label for="exampleInputText5">Text area</label>
        <textarea
            class="form-control"
            id="exampleInputText5"
            placeholder="Text area" />
    </div>
    <div class="form-group">
        <label for="exampleInputNumber">Number input</label>
        <input
            type="number"
            class="form-control"
            id="exampleInputNumber"
            placeholder="Number input" />
    </div>
</form>

<div class="form-check">
    <input
        class="form-check-input"
        type="checkbox"
        value=""
        name="checkbox"
        id="checkbox1"
        checked />
    <label class="form-check-label" for="checkbox1"> Checkbox </label>
</div>
<div class="form-check">
    <input
        class="form-check-input"
        type="checkbox"
        value=""
        name="checkbox"
        id="checkbox2" />
    <label class="form-check-label" for="checkbox2">
        Checkbox with a very, very, very, very long label
    </label>
</div>
<div class="form-check">
    <input
        class="form-check-input"
        type="checkbox"
        value=""
        name="checkbox"
        id="checkbox3"
        disabled />
    <label class="form-check-label" for="checkbox3"> Checkbox disabled </label>
</div>
<div class="form-check form-check-sm">
    <input
        class="form-check-input"
        type="checkbox"
        name="checkbox"
        id="checkbox4"
        default-checked />
    <label class="form-check-label" for="checkbox4"> Small checkbox </label>
</div>
<div class="form-check form-check-sm">
    <input
        class="form-check-input"
        type="checkbox"
        name="checkbox"
        id="checkbox5" />
    <label class="form-check-label" for="checkbox5">
        Small checkbox with a very, very, very, very long label
    </label>
</div>
<div class="form-check form-check-sm">
    <input
        class="form-check-input"
        type="checkbox"
        name="checkbox"
        id="checkbox6"
        disabled />
    <label class="form-check-label" for="checkbox6">
        Small checkbox disabled
    </label>
</div>
<div class="form-check form-check-round form-check-success">
    <input
        class="form-check-input"
        type="checkbox"
        name="checkbox"
        id="checkbox7" />
    <label class="form-check-label" for="checkbox7">
        Rounded checkbox success
    </label>
</div>
<div class="form-check form-check-sm form-check-round">
    <input
        class="form-check-input"
        type="checkbox"
        name="checkbox"
        id="checkbox8" />
    <label class="form-check-label" for="checkbox8">
        Rounded small checkbox
    </label>
</div>

<div class="form-check">
    <input
        class="form-check-input"
        type="radio"
        value=""
        name="radio"
        id="radio1"
        checked />
    <label class="form-check-label" for="radio1"> Radio 1 </label>
</div>
<div class="form-check">
    <input
        class="form-check-input"
        type="radio"
        value=""
        name="radio"
        id="radio2" />
    <label class="form-check-label" for="radio2"> Radio 2 </label>
</div>
<div class="form-check">
    <input
        class="form-check-input"
        type="radio"
        value=""
        name="radio"
        id="radio3"
        disabled />
    <label class="form-check-label" for="radio3"> Radio disabled </label>
</div>
<div class="form-check form-check-sm">
    <input class="form-check-input" type="radio" name="radio" id="radio4" />
    <label class="form-check-label" for="radio4"> Radio small </label>
</div>

<form>
    <div class="form-group">
        <label for="exampleFormControlSelect1">Select</label>
        <select
            class="form-control single-select"
            id="exampleFormControlSelect1">
            <option>Dropdown</option>
            <option>Högsta pris inklusive frakt</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">Select, dark border</label>
        <select
            class="form-control single-select form-control-border-dark"
            id="exampleFormControlSelect2">
            <option>Dropdown</option>
            <option>Högsta pris inklusive frakt</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">Select small</label>
        <select
            class="form-control single-select form-control-sm"
            id="exampleFormControlSelect2">
            <option>Dropdown</option>
            <option>Högsta pris inklusive frakt</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">Multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</form>