                
<div class="row">
<div class="col-lg-6">
    <div class="mb-3">
        <label for="simpleinput">Text</label>
        <input type="text" id="simpleinput" class="form-control">
    </div>
    <div class="mb-3">
        <label for="example-email">Email</label>
        <input type="email" id="example-email" name="example-email" class="form-control"
            placeholder="Email">
    </div>
    <div class="mb-3">
        <label for="example-password">Password</label>
        <input type="password" id="example-password" class="form-control" value="password">
    </div>
    <div class="mb-3">
        <label for="example-palaceholder">Placeholder</label>
        <input type="text" id="example-palaceholder" class="form-control"
            placeholder="placeholder">
    </div>
</div> <!-- /.col -->
<div class="col-lg-6">
    <div class="mb-3">
        <label for="example-helping">Helping text</label>
        <input type="text" id="example-helping" class="form-control"
            placeholder="Input with helping text">
        <span class="help-block"><small>A block of help text that breaks onto a new
                line.</small></span>
    </div>
    <div class="mb-3">
        <label for="example-readonly">Readonly</label>
        <input type="text" id="example-readonly" class="form-control" readonly=""
            value="Readonly value">
    </div>
    <div class="mb-3">
        <label for="example-disable">Disabled</label>
        <input type="text" class="form-control" id="example-disable" disabled=""
            value="Disabled value">
    </div>
    <div class="mb-3">
        <label for="example-static">Static control</label>
        <input type="text" readonly="" class="form-control-plaintext" id="example-static"
            value="j@example.com">
    </div>
</div>
</div>

Text area

                        
<label for="example-textarea">Text area</label>
<textarea class="form-control" id="example-textarea" rows="4"></textarea>

Options

                        
div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
    <select class="form-select" id="inputGroupSelect01">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

<div class="input-group mb-3">
    <select class="form-select" id="inputGroupSelect02">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <select class="form-select" id="inputGroupSelect03"
        aria-label="Example select with button addon">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

Input Select

Multiple Select

                        
<div class="mb-3">
    <label for="example-select">Input Select</label>
    <select class="form-control" id="example-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="mb-3">
    <label for="example-multiselect">Multiple Select</label>
    <select id="example-multiselect" multiple="" class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

Custom Select

Custom Multiple Select

                        
<div class="mb-3">
    <label for="form-select">Custom Select</label>
    <select class="form-select" id="form-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
<div class="mb-3">
    <label for="form-multiselect">Custom Multiple Select</label>
    <select class="form-select" multiple id="form-multiselect">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

Checkboxes

Default checkbox

Disabled checkbox

3 (disabled)

                        
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1"> Default checkbox </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" disabled>
    <label class="form-check-label" for="defaultCheck3"> Disabled checkbox </label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"
        disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

Custom checkboxes

Check this first custom checkbox

Check this secondary custom checkbox

Disabled custom checkbox

                        
<div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="customCheck1">
    <label class="form-check-label" for="customCheck1">Check this first custom
        checkbox</label>
</div>
<div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="customCheck2">
    <label class="form-check-label" for="customCheck2">Check this secondary custom
        checkbox</label>
</div>
<div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="customCheck1-1" disabled checked>
    <label class="form-check-label" for="customCheck1">Disabled custom checkbox</label>
</div>

Default radio

This is default radio

Disabled radio

3 (disabled)

                        
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
        value="option1" checked>
    <label class="form-check-label" for="exampleRadios1"> This is default radio </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
        value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3"> Disabled radio </label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
        value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
        value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
        value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Custom Radios

Toggle this custom radio

Or toggle this other custom radio

Disabled this custom radio

                        
<div class="form-check">
    <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="form-check">
    <input type="radio" id="customRadio2" name="customRadio" class="form-check-input"
        checked>
    <label class="form-check-label" for="customRadio2">Or toggle this other custom
        radio</label>
</div>
<div class="form-check">
    <input type="radio" name="radioDisabled" id="customRadioDisabled2"
        class="form-check-input" disabled>
    <label class="form-check-label" for="customRadioDisabled2">Disabled this custom
        radio</label>
</div>

Color picker

                        
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Datalist example

                        
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
</datalist>

Example range

                        
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Disabled range

                        
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Sizing

                        
<div class="mb-3">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<div class="mb-3">
    <input class="form-control" type="text" placeholder="Default input">
</div>
<div class="mb-3">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

Floating labels

Email address

Password

                        
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput"
        placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPassword"
        placeholder="Password">
    <label for="floatingPassword">Password</label>
</div>
<form class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInputValue"
        placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputValue">Input with value</label>
</form>
<form class="form-floating mb-3">
    <input type="email" class="form-control is-invalid" id="floatingInputInvalid"
        placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputInvalid">Invalid input</label>
</form>

Floating labels

Comments

Works with selects

Email address

Works with selects

                        
<div class="form-floating mb-3">
    <textarea class="form-control" placeholder="Leave a comment here"
        id="floatingTextarea"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
        style="height: 100px"></textarea>
    <label for="floatingTextarea2">Comments</label>
</div>
<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect"
        aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>
<div class="row g-2">
    <div class="col-md">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInputGrid"
                placeholder="name@example.com" value="mdo@example.com">
            <label for="floatingInputGrid">Email address</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating mb-3">
            <select class="form-select" id="floatingSelectGrid"
                aria-label="Floating label select example">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
            <label for="floatingSelectGrid">Works with selects</label>
        </div>
    </div>
</div>