Bootstrap 5.0 Form Field Cheat Sheet

Jan. 1, 2021, 10:45 a.m.

Bootstrap Beginners · 12 min read

Bootstrap 5.0 Form Field Cheat Sheet

By Jaysha

Last Modified: Jan. 5, 2021, 11:31 a.m.

Bootstrap form styles have customized displays for consistent field rendering across devices and browsers. 

Recently, Bootstrap has launched 5.0.  This update includes additional form fields such as a color picker and a data list input. 

 

Setup Bootstrap 5.0 in an HTML file

How to use the Bootstrap 5.0 CDN

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Bootstrap 5.0 Forms Cheatsheet</title>
  </head>
  <body>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


  </body>
</html>

You can choose to set up Bootstrap 5.0 using the CDN or by downloading the framework.

The Bootstrap 5.0 quickstart instructions list the free open-source CSS and JS CDNs. 

Add the CSS CDN to the <head> element and the JS bundle script right before the end of the </body> element. 

 


 

How to create an HTML form

Form element

How to use a <form> element

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  ...

  <!-- Bootstrap CSS -->
  ...

  <title>Bootstrap 5.0 Form Field Cheatsheet</title>
</head>
<body>

  <form>

  </form>



  <!-- Option 1: Bootstrap Bundle with Popper -->
  ...


</body>
</html>

To create an HTML form, use the <form> element nested within the <body> element. 

 


 

How to add an input to an HTML form

Input element

How to add an <input> element to a <form> element

<form>
   <input>
</form>

Next, nest an <input> element within the form.

An input element is an empty, one-line form field.

 

How to add a placeholder to the input element

<form>
  <input placeholder="Text Input">
</form>

To add placeholder text, add the placeholder attribute value.

 

Type Attributes

Assigned to the HTML <input> element, the type attribute defines the form field. Common values include text, email, password, and checkbox. 

The type attribute is not specific to Bootstrap form fields.

 

Text

<input type="text">

The attribute type creates a single-line text field. It is also the default attribute if no type is provided. 

 

Email

<input type="email">

The type attribute value email is for e-mail addresses. It will not allow any input with an @ to be submitted. 

 

Checkbox

<input type="checkbox">

One final type value is the checkbox. The value creates a small, checkable square box. 

 

Submit

<input type="submit">

To add a submit button to a form, use the type attribute value submit

 

For more information on all 22 valid HTML attribute type values, visit w3schools.com.

 

Textarea element

How to add a <textarea> element to a <form> element

<form>
   <textarea rows="4" cols="50"><textarea>
</form>

Or choose to nest a <textarea> element within the <form> element. 

The textarea element is a multi-line form field.

The rows and cols attributes are optional. 

 

Select element

How to add a <select> element to a <form> element

<form>
   <select>
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
   </select>
</form>

A <select> element is also a valid field for the <form> element. 

The select element creates a drop-down list from the option tags nested within the <select> element.

 

Label element

<form>
  <label for="textInput">Name</label>
  <input type="text" id="textInput">
</form>

<label> elements define a label for input and textarea elements. 

This element is used to help screen readers read the label out loud when the element is focused.

It also increases the hit area of checkboxes by making the label part of the toggle input. 

However, this feature only works if the for attribute value is the same as the id value of the input. 

 


 

Bootstrap Form Fields

Form-control class attribute value

<form>
  <input type="..." class="form-control">
</form>

Bootstrap Text Input

Bootstrap class attribute value form-control customizes the style, size, and focus states of the <input> and <textarea> elements. 

 

Form-label class attribute value

<form>
  <label for="textInput" class="form-label">Name</label>
  <input type="text" id="textInput" class="form-control">
</form>

Bootstrap Input with form label

Bootstrap's class attribute value form-label styles the form label with the CSS declaration of margin-bottom: .5 rem.

 

 

Form text below inputs

<form>
  <label for="inputPassword5" class="form-label">Password</label>
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
  <div id="passwordHelpBlock" class="form-text">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
  </div>
</form>

Bootstrap form text below input

The class form-text is placed in a <div>, <span>, <smaller>, or any other HTML element. 

Be sure to add the attribute class aria-describedby to ensure assistive technologies announces the text when the user enters the control.

 

Bootstrap Text Field

<form>
  <label for="textInput" class="form-label">Name</label>
  <input type="text" class="form-control" id="textInput">
</form>

To create a Bootstrap text field, add an input element with the type attribute value set to text and the class attribute value set to form-control.

 

Bootstrap Textarea

<form>
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
</form>

Bootstrap textarea

The Bootstrap textarea works similarly to the input but the rows attribute is an optional value to the field element. 

 

Bootstrap File Upload Input

Single File Upload Input

<form>
  <label for="formFile" class="form-label">File input example</label>
  <input class="form-control" type="file" id="formFile">
</form>

Bootstrap single file upload

The default Bootstrap file upload input is formatted like any other form input but the type must be specified as file

 

Multiple File Input

<form>
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</form>

Bootstrap multiple file uploads

To enable multiple file uploads, add the attribute multiple to the input element.

 

Bootstrap Select Field

<form>
  <select class="form-select">
    <option value="1">One</option>
    <option value="2" selected>Two</option>
    <option value="3">Three</option>
  </select>
</form>

Bootstrap select field

Bootstrap form selects require their own custom class attribute value form-select. Within the <select> element, nest <option> elements.

To already have a selected option as the default, add the attribute value selected to the opening option element tag.

 

Bootstrap Checks, radios, switches

Checkbox

<form>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
    <label class="form-check-label" for="flexCheckDefault">
      Checkbox
    </label>
  </div>
</form>

Bootstrap checkbox

To create a Bootstrap checkbox, create a division element with the form-check class attribute value. 

Nest an input element with the type attribute value checkbox and the class attribute value of form-check-input.

Then add a <label> with the class attribute value form-check-label still nested within the form-check division. 

Formatted this way, the checkbox, and the label will appear inline, with the box already pre-checked. 

 

Radios

<form>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
    Radio
    </label>
  </div>
</form>

Bootstrap radio select

Bootstrap radios require the input type attribute as radio. Everything else remains the same.

 

Switches

<form>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Switch checkbox input</label>
  </div>
</form>

Bootstrap switch

Bootstrap switches are similar to checkboxes, the only difference being the form-switch class attribute value, in addition to form-check, added to the division element. 

The input type attribute value will remain checkbox

 

Bootstrap Range

Bootstrap range slider

Bootstrap Min and Max

<form>
  <label for="customRange" class="form-label">Min/max range</label>
  <input type="range" class="form-range" min="0" max="10" id="customRange">
</form>

The Bootstrap range uses the type attribute value range and the class attribute value form-range. Max and min are optional attributes.

 

Bootstrap Steps

<form>
  <label for="customRange" class="form-label">Step range</label>
  <input type="range" class="form-range" min="0" max="10" step="2" id="customRange">
</form>

The step attribute value is another optional attribute for the Bootstrap range slider. 

 

New Bootstrap 5.0 Form Fields

Bootstrap Buttons

Single Toggle Button

<form>
   <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
   <label class="btn btn-primary" for="btn-check">Button toggle</label>
</form>

Bootstrap button inputs

Bootstrap 5.0 created a set of Toggle buttons, given the same functionality as a checkbox input. 

 

Radio Button

<form>
   <input type="radio" class="btn-check" id="btn-check" autocomplete="off">
   <label class="btn btn-primary" for="btn-check">Radio Button</label>
</form>

Bootstrap also provides buttons with the class attribute value radio, along with the option to create an outline button.

 

Radio Button

<form>
   <input type="radio" class="btn-radio" name="options-outlined" id="danger-outlined" autocomplete="off">
   <label class="btn btn-outline-danger" for="danger-outlined">Outline Button radio</label>
</form>

You can also choose to create an outline button, being either radio or checkbox class attribute values.

For more information on Bootstrap buttons, visit Top 3 CSS Frameworks.

 

Floating Labels

<form>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingTextInput" placeholder="John Smith">
    <label for="floatingTextInput">Name</label>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmailInput" placeholder="name@example.com">
    <label for="floatingEmailInput">Email address</label>
  </div>
</form>

Bootstrap floating labels

form-floating is a new class attribute value designed to float labels over your input fields. This new class attribute value requires a placeholder for each input element and the label element to come after the input element for it to work correctly. 

 

Bootstrap Color Picker

<form>
  <label for="exampleColorInput" class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#007bff" title="Choose your color">
</form>

Bootstrap color picker

As of Bootstrap 5.0, the HTML input type attribute color was given a custom class attribute value form-control-color.

 

Bootstrap Datalists

<form>
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search a status...">
  <datalist id="datalistOptions">
     <option value="New">
     <option value="Old">
     <option value="Pending">
     <option value="Deleted">
   </datalist>
</form>

Bootstrap datalist

In addition to the color picker, Bootstrap 5 also offers a styled datalist element, maintaining the form-control style of the other inputs. 

To create a datalist, add an <input> element for the search bar with a list attribute value. This value should be the id attached to the datalist element added immediately after.

Finally, nest the options in the datalist element. 

 

Boolean Attributes

Readonly

<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>

Bootstrap readonly input

To add a read-only input, add the readonly boolean attribute to an input element to prevent modification of the input value. The input will retain the cursor and focus features.

 

Readonly Plain Text

<input class="form-control-plaintext" type="text" placeholder="Readonly plain text..." aria-label="readonly plain text example" readonly>

Bootstrap plaintext readlonly input

To style the read-only input in plain text, add the class attribute value form-control-plaintext

 

Disabled 

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Bootstrap disabled input

If you are looking to disable a form input to prevent user interaction, add the disabled attribute to the input element. 

 


 

Render a Django Bootstrap Form

If you are using Django and are looking to render the Django form using Bootstrap form fields, check out the article Render a Django Bootstrap Form

 


 

Bootstrap Form Field Templates

Template #1

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <title>Bootstrap 5.0 Forms Cheatsheet</title>
</head>
<body>
  <div class="container p-5">
   <h5 class="pb-4">Bootstrap Form Template #1</h5>
   <div class="card mx-3 mt-n5 shadow-lg" style="border-radius: 10px; border-left:8px #007bff solid; border-right: none; border-top:none; border-bottom:none">
    <div class="card-body">
      <h4 class="card-title mb-3 text-primary text-uppercase">Contact</h4>
      
      <form>
        <div class="row">
          <div class="col">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingTextInput1" placeholder="John">
              <label for="floatingTextInput1">First Name</label>
            </div>
          </div>
          <div class="col">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingTextInput2" placeholder="Smith">
              <label for="floatingTextInput2">Last Name</label>
            </div>
          </div>
        </div>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingEmailInput" placeholder="name@example.com">
          <label for="floatingEmailInput">Email address</label>
        </div>
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
          <label class="form-check-label" for="flexSwitchCheckChecked">I agree to the Terms and Conditions of this Website.</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>


<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</body>
</html>

Bootstrap Free Form Field Template

 

 

 

Template #2

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <title>Bootstrap 5.0 Forms Cheatsheet</title>
  <style>
    .banner {
      background:linear-gradient(to left, #007bff, #9198e5);
    }
    .form-control{
      background:#F2F2F2;
      border-radius:0px;
      border:none;
    }
  </style>
</head>
<body>
  <div class="banner">
    <div class="container p-5">
    <h5 class="pb-4">Bootstrap Form Template #2</h5>
   <div class="card mx-3 mt-n5 shadow-lg" style="border-radius:0px; border:none">
    <div class="card-body p-5">
      <h4 class="card-title mb-3 text-dark text-uppercase" style="font-weight:700">Contact Us</h4>

      <form>
        <div class="row">
          <div class="col">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingTextInput1" placeholder="John">
              <label for="floatingTextInput1">First Name</label>
            </div>
          </div>
          <div class="col">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingTextInput2" placeholder="Smith">
              <label for="floatingTextInput2">Last Name</label>
            </div>
          </div>
        </div>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingEmailInput" placeholder="name@example.com">
          <label for="floatingEmailInput">Email address</label>
        </div>
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
          <label class="form-check-label" for="flexSwitchCheckChecked">I agree to the Terms and Conditions of this Website.</label>
        </div>
        <div class="text-center">
        <button type="submit" class="btn btn-primary" style="border-radius:0px">Submit</button>
      </div>
      </form>
    </div>
  </div>
</div>
</div>


<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</body>
</html>

Bootstrap Free Form Template 2

 

Above are two easy templates to get started. If you are looking for more design inspiration check out Custom HTML User Login Forms.




0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments