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!
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:
<label for="input1">Email address</label> <input type="email" class="form-control" id="input1" placeholder="[email protected]"> <label for="textarea1">Your Description</label> <textarea class="form-control" id="textarea1" rows="3" placeholder="Write your story here..."></textarea>
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:
<input class="form-control form-control-sm" type="text" placeholder="Small input"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control form-control-lg" type="text" placeholder="Large input">
And the <textarea>s like this:
<textarea class="form-control form-control-sm" rows="3" placeholder="Small textarea"></textarea> <textarea class="form-control" rows="3" placeholder="Default textarea"></textarea> <textarea class="form-control form-control-lg" rows="3" placeholder="Large textarea"></textarea>
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:
<label for="inputPassword">Password</label> <input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpBlock"> <small id="passwordHelpBlock" class="form-text text-info"> Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. </small>
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.
<input class="form-control" type="text" placeholder="This is a disabled input." disabled>
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.
<input class="form-control" type="text" placeholder="This is a readonly input." readonly>
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.
<input type="text" readonly class="form-control-plaintext" value="This is a readonly plaintext input.">
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:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
lt;/span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Options</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupFileAddon01"><i class="far fa-file-image"></i></span> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> <label class="custom-file-label" for="inputGroupFile01">Choose file</label> </div> </div>
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:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-info" type="button" id="button-addon2">Subscribe</button>
</div>
</div>
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.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<span class="input-group-text">
lt;/span> <span class="input-group-text">0.00</span> </div> </div>
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:
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
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:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" checked>
<label class="custom-control-label" for="customCheck1">You can check this first option</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">And you can also check this second option</label>
</div>
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.
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="disabledCheck" disabled>
<label class="custom-control-label" for="disabledCheck">
You can't check this.
</label>
</div>
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:
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
<label class="custom-control-label" for="customRadio1">Toggle the first option</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle the second option</label>
</div>
Inline Radio Buttons
You can place the radio buttons inline if you add the .custom-control-inline to each .custom-control.
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this first option</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this second option</label>
</div>
Disabled Radio Buttons
To prevent users from checking an option, you need to add the disabledattribute on the .custom-control-input.
<div class="custom-control custom-radio">
<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>
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.
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.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
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.
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:
Photo credit to Chase Turberville for his shot.
