Ample Template by WrapPixel

Form Input Groups

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 bg-info-subtle 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 bg-info-subtle 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 bg-info-subtle 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 bg-danger-subtle 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 bg-info-subtle 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 bg-info-subtle 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 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>

Addons With 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>

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

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

Luanch Admin

Event today

Settings

Luanch Admin

Event today

Settings

Mathew Anderson

Bianca Anderson

Andrew Johnson

Mark Strokes

Mark, Stoinus & Rishvi..

Settings

James White

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

James White

Form Input Groups

Input Addons Left

Input Addons Both Side

Input Addons Right

Input Addons Left Icon

Input Addons Both Side Icon

Input Addons Right Icon

Addons With Checkbox

Addons With Right Checkbox

Addons With Checkbox & Button

Addons With Left Checkbox

Addons With Radio

Addons With Left Radio

Addons With Radio & Button

Addons With Right Radio

Addons With Buttons

Addons With Color Button Left

Addons With Color Buttons Both

Addons With Color Button Right

Addons With icon Button Left

Addons With icon Buttons Both

Addons With icon Button Right

Multiple Addons

Addons With Left Side

Addons With Right Side

Multiple Inputs with Addons

Input With Right Side

Input With Left Side

Button Addons

Button With Left Side

Button With Right Side

Multiple Buttons With Left Side

Multiple Buttons With Left Side

Addons With Dropdown Buttons

Addons With Left Side Dropdown

Addons With Right Side Dropdown

Addons With Left Side Dropdown Segments

Addons With Right Side Dropdown Segments

Settings

Theme

Theme Direction

Theme Colors

Layout Type

Container Option

Sidebar Type

Card With