In any website of any reasonable size, you will run into one or more forms to allow the end user to send information to the server. This could be for sending a message to the host, ordering something, etc.
Forms can be simple, like a text box to search, or complicated with hundreds of fields. How a form works will be essentially the same. There is a form set of tags, and within the form, you will have additional tags to specify the elements of your form, such as text boxes, password fields, radio buttons, etc.
With Bootstrap, forms can be automatically stylized to match the rest of the website. So all you need to do is add the form fields like normal, and then apply the CSS classes. This has obvious advantages. Within Bootstrap, forms are broken down into two basic types.
The first is a simple horizontal forms which are on one line/row. This style is known as inline. These could be for a search box, a login form, voting, etc. You will be limited in the field number and size by how many items you can put on the row. While technically it could go past multiple rows, they usually do not.
The second is more complex forms which will be on multiple rows. This type of form can be as complex as you want with as many fields as you want.
As with everything in Bootstrap, you will use classes to control the layout.
Inline Forms
With an inline form, you don’t see the labels, and all the elements on are one line (or should be). Instead, you will use the placeholder attribute to show the user what to add, by giving them an example. Likewise, the label is there, it just isn’t seen. This is also controlled through a class.
Let’s take a look at a simple example. Assume that this form would be inside a div of a class row, and within that div would be another div for the column.
<form class="form-inline" method="post" action="./login.php">
<label class="sr-only">Username</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="login" placeholder="User Name" name="username">
<label class="sr-only">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="password" placeholder="Password" name="password">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>There are a couple of things to notice. First, the form has a class of form-inline, this let’s the Bootstrap CSS know how it should render the form elements. Second, notice that the labels have a class of sr-only. That is only shown to screen readers, i.e. hidden from the end user. Finally, notice that the form inputs use the placeholder attribute. This shows to the user, as text, even for the password.
You may also notice how I indented and spaced my elements. This just makes it easier for you and I to read the HTML code. Your browser, Bootstrap, etc, doesn’t care at all about white space. So use, or don’t use, as you wish. Just make it so it’s easy for you to work with.
Now you do not have to have hidden labels if you don’t want to have them. If you want the labels to be seen, then you should not add the sr-only class.
<form class="form-inline">
<label class="my-1 mr-2" for="FormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="FormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>You might have noticed classes like my-1 and mr-2. These are there for spacing. my, is vertical margin spacing, and mr, is a margin to the right side. It doesn’t take much imagination to figure out what mx and ml might do.
Larger Forms
When working with a larger form, it is helpful to group your elements. The .form-group class is the easiest way to do that, adding structure to forms.
It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom. However additional styles are applied when used within .form-inline as needed.
The form-group can be used with <fieldset>s, <div>s, or nearly any other element.
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>Girds with Form
Forms can also be laid out in columns just like your other content. In fact, I use this all the time as lining up columns of data is challenging. With responsive designed forms, you can arrange columns of form elements, and then rearrange them for tablets and phones.
For example, on a desktop, I might have four columns, in a form of label, input, label, input. On a tablet, I might switch to two rows, with label, input on the first row, and then label, and input on the second row, and then on a phone, each element gets it’s own row, to make it easier to read.
<div class="form-row">
<div class="form-group col-md-6 col-12">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group col-md-6 col-12">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>Notice we swap out the class .row for .form-row and we use a lot of divs to organize and group our form elements together.
In the columns we still have for the .form-group class, and then we have classes for the size of the columns. .col-md-6 in this case allow for on medium size devices and larger, to take up half of the container. The .col-12, is for phones, and takes 100% the width of the containing element.
Form Control Size
Bootstrap easily allows us to use one of three sizes. There is a default size, and a larger and smaller size.
To use the sizes, you just need to add teh appropriate class to your form elements. .form-control-lg will make your form element a little larger, and .form-control-sm will make your height a little smaller.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">Radio Buttons and Checkboxes
Radio buttons and check boxes are common in HTML forms, but they are a little weird in some ways because the area to click on them is small, and it’s hard to style them by default. To do so take some efforts, which is why Bootstrap did it for us, to make it fit within their stylized forms better.
To style them, you will need to wrap the input and label in a div with a class of .custom-control. Then you will add a class of .custom-checkbox or .custom-radio to that surrounding div, based upon what type of input you will be using.
In both cases, you will add a class of .custom-control-label to the label, and .custom-control-input to the input tag. From here, Bootstraps CSS will apply the appropriate styles for you.
<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>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</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 this other custom radio</label>
</div>Inline Radio Buttons
Now sometimes you will have two or more radio buttons on a single line. Bootstrap refers to this as inline. Add one more class to the surrounding div, .custom-control-inline and the radio buttons will now be on the same line.
<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 custom radio</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 other custom radio</label>
</div>Switch Checkboxes
Standard checkboxes are, well, kind of boring. So Bootstrap created a switch which is just a stylized checkbox which is a little nicer looking, and in some ways, easier to use.
To use it, you’ll create a containing div, and add the .custom-control and the .custom-switch classes to the div.
For the input with type of checkbox, you’ll add a class .custom-control-input, and then for the label, you add a class of .custom-control-label to enable the switch style.
<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 element</label>
</div>Range
The range type of input allows a user to select a number within a range. You can make a horizontally scrollable range inputs using .form-control-range as a class of that input.
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange" min="5" max="50" step="2">Working with Forms in Bootstrap was originally found on Access 2 Learn
