MatDash Bootstrap Admin

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>

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

Launch Admin

Event today

Settings

Launch Admin

Event today

Settings

David McMichael Pro

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

Launch Admin

Event today

Settings

Launch Admin

Event today

Settings

David McMichael Pro

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

Right Checkbox

Checkbox & Button

Left Checkbox

Addons With Radio

Left Radio

Radio & Button

Right Radio

Addons With Buttons

Color Button Left

Color Buttons Both

Color Button Right

Icon Button Left

Icon Buttons Both

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