CORK Admin Template - Forms Basic

Full Name

<div class="form-group">
    <label for="exampleFormControlInput1">Full Name</label>
    <input type="text" class="form-control" id="exampleFormControlInput1" value="Alan Green">
</div>

Email address

Example select

Example multiple select

Example textarea

Example file input

Form Grid Layouts

<form>
    <div class="row mb-4">
        <div class="col">
            <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
    <input type="submit" name="time" class="btn btn-primary">
</form>

<form>
    <div class="form-row mb-4">
        <div class="col">
            <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
    <input type="submit" name="time" class="mb-4 btn btn-primary">
</form>

<form>
    <div class="form-group mb-4">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
    </div>
    <div class="form-group mb-4">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
    </div>
    <input type="submit" name="time" class="btn btn-primary">
</form>

<form>
    <div class="form-row mb-4">
        <div class="col-7">
            <input type="text" class="form-control" placeholder="City">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="State">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Zip">
        </div>
    </div>
    <input type="submit" name="time" class="mb-4 btn btn-primary">
</form>

Helper Text

Use small tag and .text-muted for helper text.

I am the helper text.

<div class="form-group">
    <p>Use <code>small</code> tag and <code>.text-muted</code> for helper text. </p>
    <label for="h-text1" class="sr-only">Email address</label>
    <input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
    <small id="sh-text1" class="form-text text-muted">I am the helper text.</small>
</div>

Wrap the small tag inside the span tag with .badge

I am the helper text.

<div class="form-group">
    <p>Wrap the <code>small</code> tag inside the <code>span</code> tag with  <code>.badge</code></p>
    <label for="h-text4" class="sr-only">Email address</label>
    <input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
    <div class=" mt-1">
        <span class="badge badge-primary">
            <small id="sh-text4" class="form-text mt-0">I am the helper text.</small>
        </span>
    </div>
</div>

Use .w-100 class to the span tag to make block.

I am the helper text.

<div class="form-group">
    <p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
    <label for="h-text7" class="sr-only">Email address</label>
    <input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
    <div class="mt-1">
        <span class="badge badge-primary w-100">
            <small id="sh-text7" class="form-text mt-0 text-left">I am the helper text.</small>
        </span>
    </div>
</div>

<form class="form-inline mb-4">
    <div class="form-group  d-block text-left">
        <label for="inputPassword6" class="d-block">Password</label>
        <input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
        <small id="passwordHelpInline" class="text-muted">
            Min 8-20 char
        </small>
    </div>
</form>
<input type="submit" name="time" class="btn btn-primary">

Sizing

Large Input

Default Input

Small Input

<!-- Large Input -->
<div class="form-group">
    <label for="exampleFormControlInput1">Large Input</label>
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>

<!-- Default Input -->
<div class="form-group">
    <label for="exampleFormControlInput1">Default Input</label>
    <input class="form-control" type="text" placeholder="Default input">
</div>

<!-- Small Input -->
<div class="form-group">
    <label for="exampleFormControlInput1">Small Input</label>
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

<!-- Large Input -->
<select class="form-control form-control-lg">
    <option>Large select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<!-- Default Input -->
<select class="form-control">
    <option>Default select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<!-- Small Input -->
<select class="form-control form-control-sm">
    <option>Small select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<div class="form-group row  mb-4">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div>
<div class="form-group row mb-4">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div>
<div class="form-group row mb-4">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
</div>

Readonly

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

HTML Custom File Upload

Choose file

<div class="custom-file mb-4">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Disabled

Disabled input

Disabled select menu

Can't check this

<form>
    <fieldset disabled>
        <div class="form-group mb-4">
            <label for="disabledTextInput">Disabled input</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group mb-4">
            <label for="disabledSelect">Disabled select menu</label>
            <select id="disabledSelect" class="form-control">
                <option>Disabled select</option>
            </select>
        </div>
        <div class="form-check mt-5 mb-3 pl-0">
            <div class="custom-control custom-checkbox mb-4">
                <input type="checkbox" class="custom-control-input" id="disabledFieldsetCheck">
                <label class="custom-control-label" for="disabledFieldsetCheck">Can't check this</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary mt-0">Submit</button>
    </fieldset>
</form>

Custom

Check this custom checkbox

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Toggle this custom radio

    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
        </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline2">Toggle this custom radio</label>
    </div>

Toggle this custom radio

Or toggle this other custom radio

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Check this custom checkbox

Toggle this custom radio

<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
    <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio mb-4">
    <input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
    <label class="custom-control-label" for="radio3">Toggle this custom radio</label>
</div>

<select class="custom-select mb-4">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="custom-select custom-select-lg">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select" multiple>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="custom-select mb-4" size="4">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="3">Four</option>
    <option value="3">Five</option>
</select>

Alan Green

Lead Developer

My Profile

Inbox

#002658 is generated for Laurie Fox

#0036489 is generated for Ernest Reeves

#014778 is generated for Sean Freeman

#0165987 is generated for Nia Hillyer

#0265998 is generated for Dale Butler

Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark

New Task is added by Ernest Reeves

Dinner with Kelly Young has been moved to Completed Board by Dale Butler

Input Text

Input Password

Input Email

Input Url

Input Telephone

Input Search

Input Range

Input Custom Range

Input With Label

Form controls

Form Grid Layouts

Form grid

Form row

Form groups

Column sizing

Helper Text

Input with help text ( Default Left)

Input with badge help text (Default Left)

Input with block badge help text (Default Left)

Inline Help text

Sizing

Input Fields

Select Field

Horizontal form label sizing

Readonly

Input Readonly

HTML Custom File Upload

File Upload

Disabled

Disabled Fields

Custom

Checkboxes

Inline radio

Radio

Disabled

Select menu

Select menu sizing

Multi select

Select size

Alan Green

Todo

Messages

Andy King

Alma Clark

Vincent

Iris Hofman

Linda Nelson

New Invoice

Task Board

Event Notifications