Working with Forms in Bootstrap

Forms is the most common way you will get information from your users. However, given the responsive nature of Bootstrap, you do not know how users will normally come to you – therefore you have to be careful of how you design your forms.

A class="form-control" can be used to make <input>, <select>, and <textarea> tags have 100% width applied to them. This keeps their widths consistent, however you have to decide how to apply the label.

Bootstrap recommends wrapping the label and the form element inside a div with a class of class="form-group". This will make the label be just above the form element, but grouped together by reducing the space between the label and the element. See the example below.

  

    Email Address
    
  

  

    
       Do you agree?
    
  
 

Notice however how the check box is handled. Here the label wraps around the input tag.

Inline Forms

Of course, sometimes you want your form to be smaller, for example, with a sign in form at the top of the page. There you will use an inline form, so you use the placeholder text instead of a label. To do so, put the class form-inline in the form itself.

However, you don’t want to not have a label, because then screen readers can’t determine what the form is about. So your form labels needs a class of sr-only. This will make it hidden to your users.

Example:

  

    Email address
    
  
  

    Password
    
  
  Sign in

You can also see the user of a button in the form. Remember that Bootstrap prefers the use of the button tag over the input tag with a type of submit.

Horizontal Forms

If you want to have your labels next to your form element, then you will want to use the form-horizontal class. When you do so, you can specify how wide you want your labels and form elements to be.

You will still want to use the form-group class to group your label and your form element together.

  

    Email
    

      
    
  
  

    Password
    

      
    
  
  

    

      Sign in
    
  

Notice the use of an offset to move the sign in button so it properly lines up with the other form elements.

Controlling Sizing

Of course, the size of a form element is important as well. You wouldn’t want a small screen input area on a large screen, where it can be barely seen.

Therefore, Bootstrap has created several classes that you can use to define the size and padding of different elements.

There is a default size, but also input-lg and input-sm. They are good for more than just input tags however. These are not tied to the xs, sm, md, and lr class sets, so you can set them for any form element.

Working with Forms in Bootstrap was originally found on Access 2 Learn