Bootstrap 4 Custom Forms

Introduction

Welcome back to another exciting blog from Credo Systemz. In our previous blog, we explored Bootstrap 4 Navs and Input Groups, where we covered tabbed navigation, and vertical navs, pills, and input fields with add-ons like buttons, icons, and dropdowns, which are essential components for structuring user interfaces. Navs help organize links through tabs, pills, or vertical lists, while Input Groups make forms more interactive and professional-looking.

In this blog, we’ll take a deep dive into two more essential Bootstrap 4 components:

Custom Forms – Create beautiful, consistent, and styled form controls like checkboxes, radios, select menus, range sliders, and file uploads.
Toasts – Build push-style lightweight notifications for real-time user interaction.

This blog uses simple language, short examples, and a hands-on approach to make learning easier.

Bootstrap 4 Custom Forms

Bootstrap 4 offers enhanced styles for form controls using custom classes. These components provide consistent design and user-friendly inputs.

Custom Checkbox

To create a custom checkbox, use .custom-control and .custom-checkbox around the checkboxes. Then add the .custom-control-input to the input with type=”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>
<input type="checkbox" id="defaultCheck">
<label for="defaultCheck">Default checkbox</label>
<br>
<button type="submit" class="btn btn-primary">Submit</button>

Custom Switch

Switches are styled checkboxes that look like on/off toggles. To create a custom “toggle switch”, use .custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox.

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

Custom Radio Buttons

To create a custom radio button, use .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type=”radio”.

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="customRadio1" name="customRadios">
  <label class="custom-control-label" for="customRadio1">Select this custom radio</label>
</div>
<input type="radio" id="defaultRadio">
<label for="defaultRadio">Default radio</label>
<br>
<button type="submit" class="btn btn-primary">Submit</button>

Inline Custom Form Controls

Use .custom-control-inline to place custom controls side by side.

<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox1">
  <label class="custom-control-label" for="inlineCheckbox1">Option 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox1">
  <label class="custom-control-label" for="inlineCheckbox1">Option 2</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

Custom Select Menu

Enhance select dropdowns with .custom-select.

<select class="custom-select">
  <option selected>Select a course</option>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
</select>

Custom Select Menu Size

Change size with custom-select-sm for small or custom-select-lg for large.

<!-- Small -->
<select class="custom-select custom-select-sm">
  <option selected>Small Custom select menu</option>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
</select>

<!-- Large -->
<select class="custom-select custom-select-lg">
  <option selected>Large Custom select menu</option>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
</select>

<!-- Default -->
<select class="custom-select mb-3">
  <option selected>Default Custom Select Menu</option>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
</select>

Custom Range

Use .custom-range for range sliders.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
<label for="defaultRange">Default range</label>
<input type="range" id="defaultRange" name="points2">
<p><button type="submit" class="btn btn-primary">Submit</button></p>

Custom File Upload

Create styled file inputs using .custom-file around the input with type=”file”. Then add the .custom-file-input to it.

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

Here is the Output for Custom File Upload example:

Bootstrap 4 Toast

Toasts are lightweight notifications designed to mimic push alerts. When something occurs like a user clicks on a button, submits a form, etc., the toast component functions similarly to an alert box that appears for a brief moment.

How To Create a Toast

Use the .toast class along with .toast-header and .toast-body.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Credo Systemz</strong>
    <small>Just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
  </div>
  <div class="toast-body">
    Welcome to the best HTML tutorials!
  </div>
</div>

Show and Hide a Toast

By default, toasts are hidden. To make it visible by default, use the data-autohide="false" attribute. Use a button element and add data-dismiss="toast" to close it. Use JavaScript to control toast visibility.

$('.toast').toast('show');

To hide:

$('.toast').toast('hide');

You can also configure auto-hide, delay, and animation options.

Auto-hide with delay:


$('.toast').toast({ delay: 3000 });
$('.toast').toast('show');

Conclusion

Bootstrap 4’s Custom Forms and Toasts give your website a polished, modern feel and improve user interaction. With just a few classes, you can create beautiful form elements and functional notifications. Make use of clear examples and output for clear understanding.

In our next blog, we’ll explore Bootstrap Utilities, Flex, Icons, media object, and topics like filters, offcanvas and dark mode, which are added tools in Bootstrap 5 — powerful tools that enhance layouts, responsiveness, and visuals on your webpage. Many utility/helper classes in Bootstrap 4 and Bootstrap 5 allow you to style items rapidly without knowing any CSS code. So let’s explore it in detailed view to understand clearly.

Request more information

Bootstrap 4 Custom Forms