Material Pro Template by WrapPixel

CAROUSEL

Previous Next

ACCORDION

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

CONTACT US

Enter Name

Enter Email address

Enter Message
List style

Form Inputs

THIS MONTH

$58,356

LAST MONTH

$48,356

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="2023-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

Custom File Upload


<form>
    <div class="input-group mb-3">
        <span class="input-group-text">Upload</span>
        <div class="custom-file">
            <input class="form-control" type="file" id="formFile">
        </div>
    </div>
</form>

To use add `.custom-file-input` class to the input

Custom File Upload with Button Left


<form class="mt-4">
    <div class="input-group">
        <button class="btn btn-light-info text-info font-weight-medium" type="button">Button</button>
        <div class="custom-file">
            <input class="form-control" type="file" id="formFile">
        </div>
    </div>
</form>

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

Custom File Upload with Button Right


<form class="mt-4">
    <div class="input-group">
        <div class="custom-file">
            <input class="form-control" type="file" id="formFile">
        </div>
        <button class="btn btn-light-info text-info font-weight-medium" type="button">Button</button>
    </div>
</form>

To use add `.input-group-append` 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-weight-medium bg-light-info 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-weight-medium bg-light-warning 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-weight-medium bg-light-danger 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-light-success text-success font-weight-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>

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Form Inputs

THIS MONTH

$58,356

LAST MONTH

$48,356

Default Input

To use add form-control class to the input

Input With Helper Text

Password

Disabled Input

Add attribute disabled to disable input field.

Predefined Input Value

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

Readonly Input Field

Add attribute readonly to set field readonly.

Input With Placeholder

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

Maximum Value

Add attribute maxlength="6" to input area.

Minimum Value

Add attribute minlength="5" to input area.

Input Type Options

Input Type Text

Using input type="text"

Input Type Password

Using input type="password"

Input Phone Number

Using input type="tel"

Input Type Email

Using input type="email"

Input Type URL

Using input type="url"

Input Type Search

Using input type="search"

Input Type Numbers

Using input type="number"

Input Type Date Time

Using input type="datetime-local"

Input Type Date

Using input type="date"

Input Type Time

Using input type="time"

Input Type Week

Using input type="week"

Input Type Month

Using input type="month"

Input Type Color

Using input type="color"

Bootstrap Colorpicker

Use form-control-color classs for bootstrap colorpicker

Input Type Range

Using 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

To use add .form-select class

Multiple Select

To use add multiple to the field

Select With Addons

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

To use add `form-control` class to the input

Add attribute `disabled` to disable input field.

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

Add attribute `readonly` to set field readonly.

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

Add attribute `maxlength="6"` to input area.

Add attribute `minlength="5"` to input area.

Using `input type="text"`

Using `input type="password"`

Using `input type="tel"`

Using `input type="email"`

Using `input type="url"`

Using `input type="search"`

Using `input type="number"`

Using `input type="datetime-local"`

Using `input type="date"`

Using `input type="time"`

Using `input type="week"`

Using `input type="month"`

Using `input type="color"`

Use `form-control-color` classs for bootstrap colorpicker

Using `input type="range"`

To use add `.form-select` class

To use add `multiple` to the field

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

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

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

To use add `.custom-file-input` class to the input

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

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

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

To use add `text-center` class to the text

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