Basic Form Grid Layouts Helper Text Sizing Readonly Input HTML Custom File Upload Disabled Fields Custom Bootstrap Forms

Input Text

Use input type="text".

Input Password

Use input type="password".

Input Email

Use input type="email".

Input Url

Use input type="url".

Input Telephone

Use input type="tel".

Input Search

Use input type="search".

Input Range

Use input type="range".

Input Custom Range

Use input type="range".

Input With Label

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

Form controls

Form Grid Layouts

Form grid

<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 row

<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 groups

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

Column sizing

<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

Input with help text ( Default Left)

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>

Input with badge help text (Default Left)

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>

Input with block badge help text (Default Left)

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>

Inline Help text

Min 8-20 char 
<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

Input Fields

<!-- 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>

Select Field

<!-- 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>

Horizontal form label sizing

<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 Readonly

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

HTML Custom File Upload

File Upload

<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 Fields

<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

Checkboxes

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

Inline 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>

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>

Disabled

<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 menu

<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 menu sizing

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

Multi 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 size

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

Copyright © 2020 DesignReset, All rights reserved.

Coded with