Bootstrap 4 Forms and Buttons


Bootstrap includes a huge collection of classes to customize HTML forms and provides consistency on rendering elements across all browsers and devices.

Here's an example of a bootstrap form.

Here's the HTML source code.

<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" name="" class="form-control">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" name="" class="form-control">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" name="" id="checkbox" class="form-check-input">
    <label for="checkbox" class="form-check-label">Remember me</label>
  </div>
  <div class="form-group">
    <input type="submit" name="" class="btn btn-success" value="Log In">
  </div> 
</form> 

Form Group

Class form-group provides a structure to the form. It is used to group forms, labels, help texts as well as validation messages. It also applies some spacing at the bottom.

Form Row

If you needed to create custom layout for the form, you can use the flex grid options easily by using row or even form-row as a parent container.

Form Control

Class form-control is used to style textual forms like <input>, &lr;select> and <textarea>. For input type file, class form-control-file is included instead of form-control. For input type range, use class form-control-range.

For sizing, classes form-control-sm or form-control-lg can be used.

Class form-control-plaintext can be used for readonly form fields which will remove the default form stylings but preserve the spacings.

Horizontal Form

Horizontal forms can be added to web page using the flex grid options. Class col-form-label-sm or col-form-label-lg can be used for sizings.

Here's the HTML source code.

<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Username</label>
    <div class="col-sm-10">
      <input type="text" name="" class="form-control">
    </div>      
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" name="" class="form-control">
    </div>      
  </div>  
</form> 

Form Inline

Inline form can be added to a web page adding class form-inline to the <form> element.

Here's the HTML source code.

<form class="form-inline">
  <div class="form-group mb-2 mr-2">
    <input type="text" class="form-control" placeholder="Your Email">
  </div>
  <div class="form-group mb-2 mr-2">
    <input type="password" class="form-control" placeholder="Your Password">
  </div>
  <input type="submit" class="btn btn-primary mb-2" value="Submit">
</form>  

Checkbox and Radio

Class form-check is included for checkbox and radio containers which will force each checkbox or radio items appear in a new line by default. Use class form-check-inline to align them horizontally.

Custom Classes

Bootstrap 4 also includes custom styling classes for select, checkbox and radio elements.

Custom Select

<select class="custom-select mb-2">
  <option>Choose...</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

Custom Checkbox

<div class="custom-control custom-checkbox mb-2">
  <input type="checkbox" class="custom-control-input" id="customControl">
  <label class="custom-control-label" for="customControl">Remember my preference</label>
</div>

Custom Radio

<div class="custom-control custom-radio mb-2">
  <input type="radio" name="gender" class="custom-control-input" id="custoRadio">
  <label class="custom-control-label" for="custoRadio"> Male</label>
</div>
<div class="custom-control custom-radio mb-2">
  <input type="radio" name="gender" class="custom-control-input" id="custoRadio1">
  <label class="custom-control-label" for="custoRadio1"> Female</label>
</div>

Custom Switch

A switch can be used in place of checkbox as shown below. Simply replace class custom-checkbox with custom-switch.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Switch</label>
</div>

Custom File Input

Bootstrap 4 includes class custom-file-input to customize a file input form field.

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

Custom Range

Bootstrap 4 also includes custom-range class for new styling of range.

<input type="range" class="custom-range" id="customRange1">

Help Text

Help texts can be added to a form using class form-text.

Passwords must be at least 8 characters long.
<div class="form-group">
  <input type="password" name="" class="form-control">
  <small class="form-text text-muted">Passwords must be at least 8 characters long.</small>
</div>

Bootstrap Form Validation

You can use the default bootstrap classes and scripts to validate form with great ease.

Looks good!
Please provide a valid password.
You must agree before submitting.
<form method="post" class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label>Username</label>
      <input type="text" class="form-control" placeholder="Username" value="webtrickshome" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>    
    <div class="col-md-4 mb-3">
      <label>Password</label>
      <input type="password" class="form-control" placeholder="Password" required>
      <div class="invalid-feedback">
        Please provide a valid password.
      </div>
    </div>    
  </div>
  <div class="form-group">
    <div class="form-check pl-0">
      <div class="custom-control custom-checkbox mb-2">
        <input type="checkbox" class="custom-control-input" id="terms" required>
        <label class="custom-control-label" for="terms">Agree to terms and conditions</label>    
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }                
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

If you are using a server side validation, make sure that you have added class is-valid or is-invalid to all form fields and then added the valid or invalid feedback containers as required. You can also use valid-tooltip or invalid-tooltip for feedbacks as well.

Input Group

You can easily add texts or buttons on either side of the form element using class input-group. Use class input-group-prepend to add it on the left side of the form element or use class input-group-append to add it on the right.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="email" class="form-control" placeholder="Email">
</div>

Result

@
<div class="input-group">  
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-warning">Go</button>
  </div>
</div>

Result

Input Group Sizing

Use class input-group-sm or input-group-lg for relatively smaller or larger input group.

Buttons

Adding styles to buttons has become easy with bootstrap. Simply add class btn to any link or button or input type submit or reset to add basic button styles like padding, font-size, line height, transition, etc. Add contextual class for background or border to add contextual background or border color.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>

Outline Buttons

You can also style a button by adding contextual border classes instead.

<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-light">Light</a>
<a href="#" class="btn btn-outline-dark">Dark</a>

Button Size

Add class btn-sm or btn-lg for larger or smaller buttons.

<input type="submit" value="Small" class="btn btn-sm btn-primary">
<input type="reset" value="Large" class="btn btn-lg btn-primary">

Full Width Block Button

Add class btn-block to create a full width block level button.

<button class="btn btn-block btn-primary">Primary</button>

Active / Disabled Button

Add class active or disabled to create an active or a disabled button.

<a href="#" class="btn btn-primary active">Active</a>
<a href="#" class="btn btn-primary disabled">Disabled</a>

Button Group

Add class btn-group to the parent container of the buttons to group them and display them as a single unit. Button groups size can be customized with classes btn-group-sm and btn-group-lg.

<div class="btn-group">
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
</div>

Checkbox and Radio Buttons

Input elements like checkbox and radio can be styled as buttons.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" name="options" checked> Radio
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options"> Radio
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options"> Radio
  </label>
</div>