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>