How to Create Bootstrap Forms in Bootstrap 4

Bootstrap forms support a number of controls that give users great flexibility. In this tutorial, we will walk you through a variety of ways to create and implement them.

You will also learn how to build Bootstrap form layouts, like horizontal form, vertical form and inline form. Creating these and other forms is simple with CoreUI. 

If you’re looking for more resources on Bootstrap forms, you may want to consider a coding bootcamp. This will give you the perfect environment for experimentation and education. If you are in a coding bootcamp, you can refer back to this intro at any time for a refresher!

Getting Comfortable With Bootstrap Forms

Bootstrap 4 has plenty of options for creating forms to help your content work across different devices. While we don’t cover all the Bootstrap form options here, you can gain more experience with the program in a coding bootcamp. However, this intro will give you a wide survey of the choices available to you. Bootstrap forms are designed to give you ample flexibility for customization and design. As you start to use them in your projects, you will become more comfortable creating them to suit your future designs.

Bootstrap form controls include:

• Textarea
• Input
• Checkbox
• Select
• Radio
• Button

Form classes can be used to apply customized displays, creating a more consistent rendering across a wider portion of devices and browsers. When creating Bootstrap forms, make sure you use the right type of attribute on every input. This lets you use newer controls, like number selection and email verification.

Bootstrap 4 Form Controls

Textual Bootstrap form controls, such as <textarea>s, <select>s and <input>s are all styled using the .form-control class. Styles for focus state, general appearance, sizing and others are all included. You have a wide array of options to consider when deciding on custom Bootstrap forms to improve the style <select>s.

Sizing

You can control sizing to easily set heights by using classes like .form-control-sm or .form-control-lg. 

Read-Only

You can add readonly Boolean attributes to inputs. This lets you prevent any modifications to the value of the input. While read-only inputs retain the standard cursor you would expect, they appear lighter, similar to disabled inputs. 

Read-Only Plain Text

If you are trying to place <input readonly> elements into your Bootstrap form but you want to style them as plain text, you simply need to use .form-control-plaintext. This class lets you disable the default form field styling, so you can maintain the right padding and margin.

Radios and Checkboxes

Thanks to .form-check, radios and checkboxes in Bootstrap 4 forms have improved. It is a single class for both types of inputs. Using .form-check improves the functioning of the layout, including how its HTML elements behave.

Bootstrap 4 forms support both disabled radios and checkboxes. However, if you want to provide a cursor that is not allowed, you will need to add this attribute to .form-check-input. Once you do, the disabled attribute will create a lighter color, so you can easily identify the state of the input.

Bootstrap 4 uses radios and checkboxes to support HTML-based form validation. Using radios and checkboxes also provides exact, easily accessed labels. The <label>s and <input>s are sibling elements, working differently than an <input> that is within a <label>. You must specify the attributes to relate the <label> and <input> in this case.

Default (Stacked)

The default is that any radios and checkboxes that are immediate siblings are vertically stacked. They are also appropriately spaced with .form-check. 

Inline

You can group radios and checkboxes on the same horizontal row by adding .form-check-inline to any .form-check. 

Without Labels

You can add .position-static to inputs in .form-check if they do not have any label text. However, it is still necessary for assistive technologies that you give some form of label; for example, aria-label.

Layout

Bootstrap applies display: block and width: 100% to pretty much every form control so forms stack vertically by default. You can use additional classes on a per-form basis to vary the layout.

Form Groups

The easiest way to add structure to Bootstrap forms is using the .form-group class. Using .form-group gives you a flexible class that easily lets you group controls, optional help text, form validation messaging and labels in the proper way. The .form-group class only applies margin-bottom by default. However, .form-group will pick up additional styles as necessary in .form-inline. You can use this with <fieldset>s and <div>s or almost any other element.

Form Grid

You can build more complex Bootstrap forms with grid classes. You can use grid classes for any form layouts that require varied widths, columns or any of your alignment options. 

Form Row

You can also switch out .row for .form-row. This is a variation of Bootstrap’s standard grid row. .form-row can be used to override the default column gutters, creating tight, compact layouts. You also can create more complex layouts using the grid system.

Horizontal Form

If you want to create horizontal forms, use the grid and add the .row class to form groups. Use the .col-*-* classes to specify widths for controls and labels. If you do, make sure to add .col-form-label to the <label>s too. This ensures <label>s are centered vertically with their Bootstrap form controls. 

You might need to use margin or padding utilities in certain situations to produce the intended alignment. An example would be removing the padding-top on a stacked radio inputs label to better align your text baseline.

Column Sizing

Bootstrap’s grid system lets you place any .cols within any .row or .form-row. Any .cols you insert will equally split the available width. You also have the option of choosing a subset of columns, so they take up more or less space. Remaining columns can also be selected to take up more or less space in a specific subset. Any remaining .cols will split the rest equally.

Inline Forms

You can display a series of Bootstrap form controls, labels and buttons in the same horizontal row by using the .form-inline class. There are slight variations in Bootstrap form controls within inline forms compared to their default state. You have a number of controls at your disposal. 

You can control the display to collapse HTML white space, flex and let you provide alignment control using flexbox utilities and spacing. You can control the width to override Bootstrap’s default. However, controls only show up inline when viewports are 576 pixels wide or more. This presumes your content will be viewed on mobile devices, which tend to have narrower viewports. 

You can manually adjust width and alignment for individual Bootstrap form controls by using spacing utilities. You should always add a <label> with every form control, whether or not you hide it from non-screen-reader visitors using .sr-only. Bootstrap also supports custom form controls and selects.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.