Are you one of those people who are into designing web forms? Then perhaps you like to show collections of form controls inline or a single horizontal row.
You understand that HTML forms are a vital part of the applications and web pages. However, designing the form controls or making the form layouts manually one by one through CSS are sometimes time-consuming and daunting at the same time. Bootstrap massively streamlines the process by designing and alignment of form controls such as buttons, text areas, select boxes, input fields, and labels, among others, through a predetermined set of classes.
Bootstrap offers various kinds of types of form layouts:
- Inline form
- Horizontal form
- Vertical form (default form layout)
In this post, we will walk you through a detailed process on how to create a bootstrap inline form. We will also present you through a basic and simple to follow example that will be composed of grid layouts, password fields, placeholders, and information on responsiveness. Ultimately, this blog post will also talk about how you can improve your Bootstrap forms with the help of WYSIWYG HTML Editor.
Where to Begin?
How to Include a Basic Form to Your Bootstrap Project?
The next step you need to do is to include a form to the body of your HTML. In this case, we will make a basic form along with the following:
- two input fields
- a checkbox
- a submit button
Here’s how you can do that:
Just do keep in mind that you should always identify the input type, such as password or email. Doing so will enable you to have extra time for functionality for password obfuscation and input validation.
However, it might be necessary that you align the controls via spacing utilities. If you can see below, we have added the margin on every element with m-2.
How to Show Bootstraps Forms Inline?
Form controls will be shown one below the other. Do you like to create your own form labels and like to put inputs show inline? There’s no need to worry, as you can easily do that.
You can easily create your input show inline and form labels horizontally by using the form-inline class. However, just do keep in mind that it will display inline in viewports, which are approximately 576px wide.
After that, the controls will appear inline as follows after you applied that class to the form.
How About Bootstrap Inline Forms and Responsiveness?
When the display size is 576px, you can expect that the Bootstrap inline forms will go back to its vertical layout. Nonetheless, you will see that there’s a range between 576px and approximately 830px. It is where the form controls begin wrapping.
You can also stop that from happening. To do that, you can simply force it to return to a vertical arrangement. That’s especially true when the display size is below 830px. You can achieve that by including the following CSS.
How to Utilize Placeholder Text in Bootstrap Inline Forms?
Did you know that form controls could utilize a huge amount of horizontal place when they are displayed inline? Therefore, you might perceive that situation as a good situation. In that case, you can utilize placeholders as an alternative to labels.
You can effortlessly do that with the placeholder attribute.
A good example of this is: placeholder=”Enter email here.”
As you can notice above, we have also utilized the sr-only class. Do you wish to get rid of the labels from the visual design? Just remember that it’s would be better if you will keep them for accessibility purposes.
Fortunately, Bootstrap offers the sr-only class. The good thing about that class is that any content applied will be physically hidden. Nonetheless, it will stay available to assistive technologies like screen readers.
How to Add Placeholder Text to a Password Field?
So might have a difficult time using the placeholder attribute along with the password input type. You might not know it yet, but there is an argument over what or whether placeholder text is necessary for password fields.
Here’s how to do that:
How to Create Bootstrap Inline Forms with Grid System?
You can try playing around with the Bootstrap Grid System instead of employing the form-inline class.
Below is a good example of a responsive layout that is very much the same to the last example:
There you have it! This is how you make a Bootstrap inline form! What are your thoughts about this post? Do you have any concerns you might be answered? Feel free to share your insights with us by leaving your comments down below!