Bootstrap

Input Addons Left

<div class="input-group 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>

Add span with `.input-group-text` class before `<input>`

Input Addons Both Side

<div class="input-group mb-3">
    <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>

Add span with `.input-group-text` class before & after `<input>`

.00

Input Addons Right

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

Add span with `.input-group-text` class after`<input>`

Input Addons Left Icon

<div class="input-group">
    <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Input Addons Both Side Icon

<div class="input-group mb-3">
    <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-text"><i data-feather="trash-2" class="feather-sm fill-white"></i></span>
</div>

Input Addons Right Icon

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
</div>

Addons With Checkbox

Addons With Right Checkbox

<form>
    <div class="input-group">
        <div class="input-group-text">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="checkbox3" value="check">
                <label class="form-check-label" for="checkbox3"></label>
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
</form>

To use add `input-group-prepend` before input field.

Addons With Checkbox & Button

<form>
    <div class="input-group">
        <div class="input-group-text">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="checkbox2" value="check">
                <label class="form-check-label" for="checkbox2"></label>
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox">
        <button class="btn btn-light-info text-info font-medium" type="button">Go!</button>
    </div>
</form>

To use add `input-group-prepend & append` before and afetr input field.

Addons With Left Checkbox

<form>
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with checkbox">
        <div class="input-group-text">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="checkbox4" value="check">
                <label class="form-check-label" for="checkbox4"></label>
            </div>
        </div>
    </div>
</form>

To use add `input-group-append` after input field.

Addons With Radio

Addons With Left Radio

<form>
    <div class="input-group">
        <div class="input-group-text">
            <div class="form-check">
                <input type="radio" id="customRadio5" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio5"></label>
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</form>

To use add `input-group-prepend` before input field.

Addons With Radio & Button

<form>
    <div class="input-group">
        <button class="btn btn-light-info text-info font-medium" type="button">Go!</button>
        <input type="text" class="form-control" aria-label="Text input with radio button">
        <div class="input-group-text">
            <div class="form-check">
                <input type="radio" id="customRadio6" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio6"></label>
            </div>
        </div>
    </div>
</form>

To use add `input-group-prepend & append` before and afetr input field.

Addons With Right Radio

<form>
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with radio button">
        <div class="input-group-append">
            <div class="input-group-text">
                <div class="form-check">
                    <input type="radio" id="customRadio7" name="customRadio" class="form-check-input">
                    <label class="form-check-label" for="customRadio7"></label>
                </div>
            </div>
        </div>
    </div>
</form>

To use add `input-group-append` after input field.

Addons With Buttons

Addons With Color Button Left

<form class="mt-3">
    <div class="input-group mb-3">
            <button class="btn btn-light-info text-info font-medium" type="button">Go!</button>
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
    </div>
</form>

To use add `button` in the prepend div.

Addons With Color Buttons Both

<form class="mt-3">
    <div class="input-group mb-3">
        <button class="btn btn-light-danger text-danger font-medium d-flex align-items-center" type="button"><i data-feather="heart" class="fill-white feather-sm me-1"></i> Love</button>
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        <button class="btn btn-light-info text-info font-medium d-flex align-items-center" type="button"><i data-feather="slash" class="fill-white feather-sm me-1"></i>Hate</button>
    </div>
</form>

To use add `button` in the prepend and append div.

Addons With Color Button Right

<form class="mt-3">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        <button class="btn btn-light-info text-info font-medium" type="button">Go!</button>
    </div>
</form>

To use add `button` in the append div.

Addons With icon Button Left

<form class="mt-3">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-light-info text-info" type="button">
                <i data-feather="settings" class="fill-white feather-sm"></i>
            </button>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
    </div>
</form>

Addons With icon Buttons Both

<form class="mt-3">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-light-info text-info" type="button">
                <i data-feather="edit-2" class="fill-white feather-sm"></i>
            </button>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        <button class="btn btn-light-danger text-danger" type="button">
            <i data-feather="trash-2" class="fill-white feather-sm"></i>
        </button>
    </div>
</form>

Addons With icon Button Right

<form class="mt-3">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        <button class="btn btn-light-danger text-danger" type="button">
            <i data-feather="heart" class="fill-white feather-sm"></i>
        </button>
    </div>
</form>

Multiple Addons

Addons With Left Side

<form class="mt-3">
    <div class="input-group">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    </div>
</form>

To use add `input-group-text` class in the input-group-prepend class.

Addons With Right Side

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
</form>

To use add `input-group-text` class in the input-group-append class.

Multiple Inputs with Addons

Input With Right Side

<form class="mt-3">
    <div class="input-group">
        <span class="input-group-text">First and last name</span>
        <input type="text" class="form-control">
        <input type="text" class="form-control">
    </div>
</form>

To use add `form-control` two times.

Input With Left Side

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control">
        <input type="text" class="form-control">
        <span class="input-group-text">First and last name</span>
    </div>
</form>

To use add `form-control` two times.

Button Addons

Button With Left Side

<form class="mt-3">
    <div class="input-group">
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
        <input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
    </div>
</form>

To use add `button` in the prepend class.

Button With Right Side

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
    </div>
</form>

To use add `button` in the append class.

Multiple Buttons With Left Side

<form class="mt-3">
    <div class="input-group">
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
        <input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
    </div>
</form>

Multiple Buttons With Left Side

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
        <button class="btn btn-light-secondary text-secondary font-medium" type="button">Button</button>
    </div>
</form>

Addons With Dropdown Buttons

Addons With Left Side Dropdown

<form class="mt-3">
    <div class="input-group">
        <button class="btn btn-light-info text-info font-medium dropdown-toggle" type="button" data-bs-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>
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
</form>

To use add `dropdown` in the prepend class div.

Addons With Right Side Dropdown

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <button class="btn btn-light-info text-info font-medium dropdown-toggle" type="button" data-bs-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>
</form>

To use add `dropdown` in the append class div.

Addons With Left Side Dropdown Segments

<form class="mt-3">
    <div class="input-group">
        <button type="button" class="btn btn-light-secondary text-secondary font-medium">Action</button>
        <button type="button" class="btn btn-light-secondary text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </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>
        <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    </div>
</form>

Addons With Right Side Dropdown Segments

<form class="mt-3">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
        <button type="button" class="btn btn-light-secondary text-secondary font-medium">Action</button>
        <button type="button" class="btn btn-light-secondary text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </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>
</form>

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Form Input Groups

$58,256

Input Addons Left

Add span with .input-group-text class before <input>

Input Addons Both Side

Add span with .input-group-text class before & after <input>

Input Addons Right

Add span with .input-group-text class after<input>

Input Addons Left Icon

Input Addons Both Side Icon

Input Addons Right Icon

Addons With Checkbox

Addons With Right Checkbox

To use add input-group-prepend before input field.

Addons With Checkbox & Button

To use add input-group-prepend & append before and afetr input field.

Addons With Left Checkbox

To use add input-group-append after input field.

Addons With Radio

Addons With Left Radio

To use add input-group-prepend before input field.

Addons With Radio & Button

To use add input-group-prepend & append before and afetr input field.

Addons With Right Radio

To use add input-group-append after input field.

Addons With Buttons

Addons With Color Button Left

To use add button in the prepend div.

Addons With Color Buttons Both

To use add button in the prepend and append div.

Addons With Color Button Right

To use add button in the append div.

Addons With icon Button Left

Addons With icon Buttons Both

Addons With icon Button Right

Multiple Addons

Addons With Left Side

To use add input-group-text class in the input-group-prepend class.

Addons With Right Side

To use add input-group-text class in the input-group-append class.

Multiple Inputs with Addons

Input With Right Side

To use add form-control two times.

Input With Left Side

To use add form-control two times.

Button Addons

Button With Left Side

To use add button in the prepend class.

Button With Right Side

To use add button in the append class.

Multiple Buttons With Left Side

Multiple Buttons With Left Side

Addons With Dropdown Buttons

Addons With Left Side Dropdown

To use add dropdown in the prepend class div.

Addons With Right Side Dropdown

To use add dropdown in the append class div.

Addons With Left Side Dropdown Segments

Addons With Right Side Dropdown Segments

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Add span with `.input-group-text` class before `<input>`

Add span with `.input-group-text` class before & after `<input>`

Add span with `.input-group-text` class after`<input>`

To use add `input-group-prepend` before input field.

To use add `input-group-prepend & append` before and afetr input field.

To use add `input-group-append` after input field.

To use add `input-group-prepend` before input field.

To use add `input-group-prepend & append` before and afetr input field.

To use add `input-group-append` after input field.

To use add `button` in the prepend div.

To use add `button` in the prepend and append div.

To use add `button` in the append div.

To use add `input-group-text` class in the input-group-prepend class.

To use add `input-group-text` class in the input-group-append class.

To use add `form-control` two times.

To use add `form-control` two times.

To use add `button` in the prepend class.

To use add `button` in the append class.

To use add `dropdown` in the prepend class div.

To use add `dropdown` in the append class div.