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

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.

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 bg-info-subtle text-info " type="button">Go!</button> </div> </form>

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

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

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.

Radio & Button

                                  <form> <div class="input-group"> <button class="btn bg-info-subtle text-info " 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.

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

Color Button Left

                                  <form class="mt-3"> <div class="input-group mb-3"> <button class="btn bg-info-subtle text-info " 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.

Color Buttons Both

                                  <form class="mt-3"> <div class="input-group mb-3"> <button class="btn bg-danger-subtle text-danger 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 bg-info-subtle text-info 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.

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 bg-info-subtle text-info " type="button">Go!</button> </div> </form>

To use add button in the append div.

Icon Button Left

                                  <form class="mt-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn bg-info-subtle 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>

Icon Buttons Both

                                  <form class="mt-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn bg-info-subtle 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 bg-danger-subtle text-danger" type="button"> <i data-feather="trash-2" class="fill-white feather-sm"></i> </button> </div> </form>

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 bg-danger-subtle 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 bg-secondary-subtle text-secondary " 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 bg-secondary-subtle text-secondary " 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 bg-secondary-subtle text-secondary " type="button">Button</button> <button class="btn bg-secondary-subtle text-secondary " 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 bg-secondary-subtle text-secondary " type="button">Button</button> <button class="btn bg-secondary-subtle text-secondary " 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 bg-info-subtle text-info 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 bg-info-subtle text-info 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 bg-secondary-subtle text-secondary ">Action</button> <button type="button" class="btn bg-secondary-subtle 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 bg-secondary-subtle text-secondary ">Action</button> <button type="button" class="btn bg-secondary-subtle 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>