Day 7: Bootstrap 4 Inputs Tutorial and Examples

 

Hey and welcome to the 7th day of Bootstrap 4 🙌🏼 Today we will learn about more Bootstrap 4 form elements. We will go through Bootstrap 4 text inputs and custom inputs like checkboxes, radio buttons and select pickers. It is very likely that you will need to use them when building a web project, so it is useful to know their syntax and special Bootstrap 4 classes.

This article is divided into the following parts:

Let’s get started!

bootstrap-4-input-ninja

Photo credit to Mantas Gr for his shot.

Bootstrap 4 Inputs

Bootstrap 4 has created classes for form elements in order for their display to be consistent across browsers. When using inputs be sure to add the "type" attribute to take advantage of HTML5 input controls such as email verification or number control.

Text Inputs

The inputs that are created for text and we will use in this tutorial are <input> and <textarea>. They both need the .form-control class to get the Bootstrap 4 inputs look.

Here is an example with how they are displayed:

dark


Setting Sizes

You can modify the dimensions of the text inside the inputs and their height with the classes .form-control-sm for a smaller input and .form-control-lg for a bigger input.

The text <input>s look like this:

dark



And the <textarea>s like this:

dark


Adding Help Text

You can add an explanation to your input with a block of text next to it. Bootstrap 4 has a special class for this called .form-text. This makes the element it is used with a block and adds a top margin. You can use this class with tags such as <small>, <span> or <p>. If you want to change how the help block looks, you can use the text utilities described in the Bootstrap 4 typography day.

Here is an example:

dark


Input States

Disabled State

To prevent user interactions for an input, you can add the disabled attribute. It will appear lighter and won’t take any input.

dark


Readonly State

You can disabled an input with the readonly attribute too. The difference between disabled and readonly is that the readonly inputs retain the cursor.

dark


Readonly Plain Text State

You may want to give a different appearance to your disabled input. You can display the value they show with the same margins and paddings as the other inputs using the class .form-control-plaintext. In this way the value will be shown as plain text, but it will be aligned with the other inputs.

dark


Bootstrap 4 Input Groups

You can extend an input by adding an add-on on either side. An add-on is a text, icon or button that helps the user understand the use of the input.

Basic Example

To create an input group you need an element with the .input-group class that holds both the .form-control and the add-on. If you want to place the add-on before the input, you need to use the .input-group-prepend class. And iff you want the add-on after the input, you need to use the .input-group-append class. The input can be a text input, a textarea, a custom select or a file upload.

Here are examples with how they look:

dark



Side note: In this example we have used some knowledge from previous days. If you aren’t familiar with it yet, check out the Bootstrap 4 spacing utilities and Bootstrap 4 typography with Font Awesome icons.

Button Addon

You can make the add-on an actionable button. Here is an example:

dark


Multiple Inputs and Addons

An input group can have multiple inputs and multiple add-ons. By placing the elements in the same .input-group div, they will be glued together.

dark


Setting Sizes

If you want to size an input group, you need to add a sizing class on the input group and the inputs will automatically resize. Sizing the inputs and add-ons individually is not supported. There are 3 size options: the default one (no extra class added), the small one with the class .input-group-sm and the large on with the class .input-group-lg.

Here is an example to show the difference in size:

dark


Bootstrap 4 Custom Inputs

In this section, we will see how to use the Bootstrap 4 classes for custom inputs: checkboxes, radios, select pickers and file inputs.

The default checkboxes and radios can be overwritten by the Bootstrap 4 classes. There are 2 options both for checkboxes and radios: the default version and the custom one. I think the custom version looks better than the default version, so I recommend using this version. The next examples will be using the custom versions for checkboxes and radio buttons. If you want to see how the default ones look, you can check out the default Bootstrap 4 documentation for them.

Bootstrap 4 Custom Checkboxes

Stacked Checkboxes

To get the custom Bootstrap 4 style for checkboxes you need to use the .custom-control class together with the .custom-checkbox class. Inside the .custom-checkbox element you will need .custom-control-input and the .custom-control-label. If you ware using multiple checkboxes, they will be vertically stacked and aligned:

dark


Disabled Checkboxes

If you want to prevent all user interactions with a checkbox, you need to add the disabled attribute on the .form-check-input.

dark


Bootstrap 4 Custom Radio Buttons

Stacked Radio Buttons

To use the custom (and prettier) radio, you need to use the base .custom-control class together with the .custom-radio class. The input needs the .custom-control-input class and the label the .custom-control-label class. The radio buttons will appear stacked as a default behaviour:

dark


Inline Radio Buttons

You can place the radio buttons inline if you add the .custom-control-inline to each .custom-control.

dark


Disabled Radio Buttons

To prevent users from checking an option, you need to add the disabledattribute on the .custom-control-input.

dark


Bootstrap 4 Select Picker

To change the style of a select picker from the default browser style to the Bootstrap 4 style, you need to add the .custom-select class.

dark

I have written a separate blog post called Useful Bootstrap 4 Select Picker Options for Your Forms in which there are some advanced options for the select picker. You can inspect it for advanced use cases for the select picker and an outside library you can import.

Bootstrap 4 File Browser

Bootstrap 4 offers the possibility to style the appearance of the file input. It does not however offer support for showing the filename of the file once selected.

dark



These are all the inputs that have custom classes in Bootstrap 4. Tomorrow we will see how we can combine them into forms together with the buttons described in Bootstrap 4 Buttons Tutorial and Examples. Until then, I hope you will have a relaxing evening with a hot cup of tea or coffee.

bootstrap-4-inputs-end

Photo credit to Mauro Gatti for his shot.

Further Reading

If you want to see and edit the code used in this tutorial, you can do soon CodePen. Let me know if you want to achieve something and have a hard time.

And if you still have some time, you can check out the official Bootstrap 4 documentation:

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.