Modernize Bootstrap Admin

Form Inputs

Default Input

                                          
      <form>
          <div class="form-group">
              <input type="text" class="form-control">
          </div>
      </form>

To use add form-control class to the input

Input With Helper Text

                                          
      <form>
          <div class="form-group">
              <input type="text" class="form-control" id="nametext" aria-describedby="name" placeholder="Name">
              <small id="name" class="form-text text-muted">Helper Text</small>
          </div>
      </form>

Password

                                        
      <form>
          <div class="form-group">
              <input type="password" class="form-control" id="passtext" placeholder="Password">
          </div>
      </form>

Disabled Input

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext1" placeholder="Name" disabled>
          </div>
      </form>

Add attribute disabled to disable input field.

Predefined Input Value

                                                                                  
      <form class="mt-2">
          <div class="form-group">
              <input type="text" class="form-control" id="prenametext" value="Name">
          </div>
      </form>

Add attribute value="VALUE" to set predefined value.

Readonly Input Field

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="readonly" placeholder="Readonly Text" readonly>
          </div>
      </form>

Add attribute readonly to set field readonly.

Input With Placeholder

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="placeholder" placeholder="Placeholder Text">
          </div>
      </form>

Add attribute placeholder="..." to input area.

Maximum Value

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" maxlength="6" id="maxval" aria-describedby="maxval" placeholder="Name">
          </div>
      </form>

Add attribute maxlength="6" to input area.

Minimum Value

                                                                                  
      <form class="mt-4">
        <div class="form-group">
          <input type="text" class="form-control" minlength="5" id="minval" aria-describedby="minval" placeholder="Name">
        </div>
      </form>

Add attribute minlength="5" to input area.

Input Type Options

Input Type Text

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" value="Name">
          </div>
      </form>

Using input type="text"

Input Type Password

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="password" class="form-control" value="Name">
          </div>
      </form>

Using input type="password"

Input Phone Number

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="tel" class="form-control" value="1-(444)-444-4445">
          </div>
      </form>

Using input type="tel"

Input Type Email

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="email" class="form-control" value="abc@example.com">
          </div>
      </form>

Using input type="email"

Input Type URL

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="url" class="form-control" value="http://google.com">
          </div>
      </form>

Using input type="url"

Input Type Search

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="search" class="form-control" value="how to...">
          </div>
      </form>

Using input type="search"

Input Type Numbers

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="number" class="form-control" value="6029">
          </div>
      </form>

Using input type="number"

Input Type Date Time

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
          </div>
      </form>

Using input type="datetime-local"

Input Type Date

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="date" class="form-control" value="2018-05-13">
          </div>
      </form>

Using input type="date"

Input Type Time

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="time" class="form-control" value="22:33:00">
          </div>
      </form>

Using input type="time"

Input Type Week

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="week" class="form-control" value="2011-W33">
          </div>
      </form>

Using input type="week"

Input Type Month

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="month" class="form-control" value="1999-08">
          </div>
      </form>

Using input type="month"

Input Type Color

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="color" class="form-control" value="#563d7c">
          </div>
      </form>

Using input type="color"

Bootstrap Colorpicker

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
          </div>
      </form>

Use form-control-color classs for bootstrap colorpicker

Input Type Range

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="range" class="form-range" id="customRange1">
          </div>
      </form>

Using input type="range"

General Textarea

Textarea

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <textarea class="form-control" rows="3"></textarea>
          </div>
      </form>

Textarea With Placeholder

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
          </div>
      </form>

Textarea With Helper Text

                                                                                  
      <form>
          <div class="form-group">
              <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
              <small id="textHelp" class="form-text text-muted">Helper Text</small>
          </div>
      </form>

Inline Checkboxes & Radios

Inline Default Checkbox

                                                                                  
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
          <label class="form-check-label" for="inlineCheckbox1">1</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
          <label class="form-check-label" for="inlineCheckbox2">2</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
          <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
      </div>

3 (disabled)

Inline Default Radio Button

                                                                                  
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
          <label class="form-check-label" for="inlineRadio1">1</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
          <label class="form-check-label" for="inlineRadio2">2</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
          <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
      </div>

3 (disabled)

Inline Custom Checkbox

                                                                                  
      <div class="form-check form-check-inline">
          <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="customCheck1">
              <label class="custom-control-label" for="customCheck1">1</label>
          </div>
      </div>
      <div class="form-check form-check-inline">
          <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="customCheck2">
              <label class="custom-control-label" for="customCheck2">2</label>
          </div>
      </div>
      <div class="form-check form-check-inline">
          <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="customCheck3" disabled="">
              <label class="custom-control-label" for="customCheck3">3</label>
          </div>
      </div>

Inline Custom Radios

                                                                                  
      <div class="form-check form-check-inline">
          <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked">
              <label class="custom-control-label" for="customControlValidation2">1</label>
          </div>
      </div>
      <div class="form-check form-check-inline">
          <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked">
              <label class="custom-control-label" for="customControlValidation3">2</label>
          </div>
      </div>
      <div class="form-check form-check-inline">
          <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="customControlValidation4" name="radio-stacked" disabled>
              <label class="custom-control-label" for="customControlValidation4">3</label>
          </div>
      </div>

General Select

Select

                                                                                  
      <form class="mt-4">
          <div class="form-group mb-4">
              <label for="exampleFormControlSelect1">Select No</label>
              <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
              </select>
          </div>
      </form>

Form Select

                                                                                  
      <form>
          <div class="form-group mb-4">
              <label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
              <select class="form-select mr-sm-2" id="inlineFormCustomSelect">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
      </form>

To use add .form-select class

Multiple Select

                                                                                  
      <form>
          <select multiple class="form-control" id="exampleFormControlSelect2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
          </select>
      </form>

To use add multiple to the field

Select With Addons

                                                                                  
      <form>
          <div class="input-group mb-3">
              <label class="input-group-text" for="inputGroupSelect01">Options</label>
              <select class="form-select" id="inputGroupSelect01">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
      </form>

To use add .input-group-prepend class to the div

Select With Buttons

                                                                                  
      <form>
          <div class="input-group">
              <select class="form-select" id="inputGroupSelect04">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
                  <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
      </form>

To use add .input-group-append class to the div

File Upload

Default File Upload

                                                                                  
      <form class="mt-3">
          <input class="form-control" type="file" id="formFile">
      </form>

To use add .form-control-file class to the input

Disabled File Upload

                                                                                  
<form>
  <div class="mb-3">
    <input class="form-control" type="file" id="formFileDisabled" disabled>
  </div>
</form>

To use add disabled attr to the input

Small File Upload

                                                                                  
<form class="mt-4">
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</form>

To use add .form-control-sm class to the div

Large File Upload

                                                                                  
<form class="mt-4">
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</form>

To use add .form-control-lg class to the div

Different Style in Helper Text

Left Helper Text

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext2" aria-describedby="name" placeholder="Name">
              <div class="d-flex justify-content-start">
                  <small id="name1" class="badge badge-default text-info font-medium bg-info-subtle form-text">Helper Text</small>
              </div>
          </div>
      </form>

To use add justify-content-start class to the text

Center Helper Text

                                                                                  
      <form class="mt-3">
          <div class="form-group mb-0">
              <input type="text" class="form-control" id="nametext4" aria-describedby="name" placeholder="Name">
              <p class="text-center mb-0">
                  <small id="name45" class="badge badge-default text-warning font-medium bg-warning-subtle form-text">Helper Text</small>
              </p>
          </div>
      </form>

To use add text-center class to the text

Right Helper Text

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext12" aria-describedby="name" placeholder="Name">
              <div class="d-flex justify-content-end">
                  <small id="name13" class="badge badge-default text-danger font-medium bg-danger-subtle form-text">Helper Text</small>
              </div>
          </div>
      </form>

To use add justify-content-end class to the text

Inline Helper Text

                                                                                  
      <form class="mt-3">
          <div class="row">
              <div class="col-md-8">
                  <input type="text" class="form-control" id="helpInput10" placeholder="Helper Text">
              </div>
              <div class="col-md-4">
                  <small class="text-muted">Helper Text</small>
              </div>
          </div>
      </form>

Inline Helper Text With Color

                                                                                  
      <form class="mt-3">
        <div class="row">
            <div class="col-md-8">
                <input type="text" class="form-control" id="helpInput11" placeholder="Help Text">
            </div>
            <div class="col-md-4 block-tag">
                <small class="badge bg-success-subtle text-success font-medium">Helper Text</small>
            </div>
        </div>
      </form>

Input With Validaton

Input With Success

                                                                                  
      <form class="mt-3">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control is-valid" id="inputSuccess1">
        <div class="valid-feedback">
            Success! You've done it.
        </div>
      </form>

To use add is-valid class to the input

Input With Danger

                                                                                  
      <form class="mt-3">
          <label class="form-control-label" for="inputDanger1">Input with danger</label>
          <input type="text" class="form-control is-invalid" id="inputDanger1">
          <div class="invalid-feedback">
              Sorry, that username's taken. Try another?
          </div>
      </form>

To use add is-invalid class to the input

Inline Input With Success

                                                                                  
      <form class="mt-3 form-horizontal">
          <form class="mt-3 form-horizontal">
          <div class="form-group row">
              <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="name@example.com">
                  <div class="valid-feedback">Success! You've done it.</div>
              </div>
          </div>
      </form>

To use add form-horizontal class to the input

Inline Input With Danger

                                                                                  
      <form class="mt-3 form-horizontal">
        <div class="form-group row">
            <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="name@example.com">
                <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
            </div>
        </div>
      </form>

To use add form-horizontal class to the input

Input With Tooltip

Tooltip Bottom

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" class="form-control" placeholder="Bottom">
      </form>

Tooltip Right

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" class="form-control" placeholder="Right">
      </form>

Tooltip Top

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" class="form-control" placeholder="Top">
      </form>

Tooltip Left

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" class="form-control" placeholder="Left">
      </form>

Input Text Styles

Input Text Bold

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-bold" placeholder="Bold Text">
      </form>

Input Text Normal

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-normal" placeholder="Normal Text">
      </form>

Input Text Light

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-light" placeholder="Light Text">
      </form>

Input Text Italic

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control font-italic" placeholder="Italic Text">
      </form>

Input Text Lowercase

                                                                                  
      <form class="mt-3">
        <input type="text" class="form-control text-lowercase" placeholder="Lowercase">
      </form>

Input Text Uppercase

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control text-uppercase" placeholder="Uppercase">
      </form>

Input Text Capitalize

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control text-capitalize" placeholder="capitalize">
      </form>

Input Sizing

Small Input

                                                                                  
      <form class="mt-3">
          <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="Small">
      </form>

Normal Input

                                                                                  
      <form class="mt-3">
        <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
      </form>

Large Input

                                                                                  
      <form class="mt-3">
        <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="Large">
      </form>

Supreme toys cooker

Kitchenware Item

$250
Supreme toys cooker

Kitchenware Item

$250
Supreme toys cooker

Kitchenware Item

$250

Sub Total

$2530

Total

$6830

Go to shopping cart

Welcome to Modernize

Easy to costomize the Template!!!

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

Roman Joined the Team!

New message

Bianca sent payment

Jolly completed tasks

John received payment

Roman Joined the Team!

Mathew Anderson

My Profile

My Inbox

My Task

Unlimited Access

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Contact List Table

Notes Application

Roman Joined the Team!

New message

Bianca sent payment

Jolly completed tasks

John received payment

Roman Joined the Team!

Mathew Anderson

My Profile

My Inbox

My Task

Unlimited Access

Form Inputs

Default Input

Input With Helper Text

Password

Disabled Input

Predefined Input Value

Readonly Input Field

Input With Placeholder

Maximum Value

Minimum Value

Input Type Options

Input Type Text

Input Type Password

Input Phone Number

Input Type Email

Input Type URL

Input Type Search

Input Type Numbers

Input Type Date Time

Input Type Date

Input Type Time

Input Type Week

Input Type Month

Input Type Color

Bootstrap Colorpicker

Input Type Range

General Textarea

Textarea

Textarea With Placeholder

Textarea With Helper Text

Inline Checkboxes & Radios

Inline Default Checkbox

Inline Default Radio Button

Inline Custom Checkbox

Inline Custom Radios

General Select

Select

Form Select

Multiple Select

Select With Addons