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


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

Floating Inputs

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


<div class="form‐group">
    <div class="form‐float">
        <input type="text" class="form‐control" id="fullName" placeholder="Full Name">
        <label for="fullName">Full name</label>
    </div>
    <input type="submit" name="txt" class="mt‐4 btn btn‐primary">
</div>

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>

Column sizing


<form>
<div class="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="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="row">
<div class="col-xl-7">
<div class="form-group">
    <p>Use <code>small</code> tag and <code>.text-muted</code> for helper text. </p>
    <label for="h-text1" class="visually-hidden">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>
</div>
</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="row">
<div class="col-xl-7">
<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="visually-hidden">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>
</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="row">
<div class="col-xl-7">
<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="visually-hidden">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>
</div>
</div>

Inline Help text

I am the helper text. 

<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">
    I am the helper text.
</small>
</div>
</form>
<input type="submit" name="time" class="btn btn-primary">

Sizing

Input Fields


<div class="row">

<div class="col-xl-4">
<div class="form-group">
    <label for="exampleFormControlInput1">Large Input</label>
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
    <label for="exampleFormControlInput1">Default Input</label>
    <input class="form-control" type="text" placeholder="Default input">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
    <label for="exampleFormControlInput1">Small Input</label>
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
</div>

</div>

Select Field


<div class="row">

<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-select  form-select-lg">
    <option>Large select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
</div>
<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-select ">
    <option>Default select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
</div>
<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-select  form-select-sm">
    <option>Small select</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
</div>

</div>

Custom

Checkboxes


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

Inline radio


<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>

Radio


<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio1">
<label class="form-check-label" for="customRadio1">
Toggle this custom radio
</label>
</div>

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio2">
<label class="form-check-label" for="customRadio2">
Or toggle this other custom radio
</label>
</div>

Disabled


<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Check this custom checkbox</label>
</div>

<div class="form-check">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">Toggle this custom radio</label>
</div>

Readonly

Input Readonly


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

HTML Custom File Upload

File Upload


<div class="mb-3">
<input class="form-control file-upload-input" type="file" id="formFile">
</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-group mb-4">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
            Can't check this
        </label>
    </div>
</div>
<button type="submit" class="btn btn-primary mt-0">Submit</button>
</fieldset>
</form>

Copyright © 2026 DesignReset, All rights reserved.

Coded with