Modal dialogs are the ultimate way to get the user’s attention, as the user can’t interact with the rest of the page without first closing the modal dialog. Modal dialogs can contain whatever HTML you need to present, including status messages, videos, or forms.


In response to several questions I’ve seen in the discussion forums, I wanted to spend a little time talking about jQuery/JavaScript and Bootstrap. Now, if you’re not familiar with JavaScript don’t worry about this section. It is, as the title implies, bonus content.

One thing that you’ve probably noticed is Bootstrap does a lot of work for you, allowing you to avoid writing JavaScript in many cases. However, there is an API that is available you can use for certain operations, such as closing a modal dialog box. But even for actions that don’t have Bootstrap API calls, such as toggling validation, you’ll notice that you can accomplish the desired result by simply adding and removing the appropriate classes, which jQuery makes very simple.

<!DOCTYPE html>



<title>Confirm !</title>

<meta charset=”utf-8″ />

<link href=”Styles/bootstrap.css” rel=”stylesheet” />




Bootstrap offers great support for collecting information from users, as well as providing feedback. As with everything else in Bootstrap, you create forms by adding the appropriate classes and HTML structure to your pages.


By default, forms in Bootstrap are displayed vertically, meaning that the prompt for an input control, such as a textbox, is placed above the input control. Quite frequently, you want the prompt next to the input control. In order to do this, a little bit of structure is required for the form, and a couple of classes need to be added.

Creating the form element

In order for a form to use horizontal display, the form-horizontal class must be added to the form element.

  1. <formclass=”form-horizontal”>
  2. <!– form content here –>
  3. </form>

Creating the rows for the form content

Horizontal forms use the same grid system we’ve already covered. However, you won’t create normal rows like you did in the past. Instead, you will create form groups. Form groups tell Bootstrap that the controls inside of that section are, as the name implies, a group of controls for the form. In addition, the form-group class also creates a row, so you do not need to add in the row class.

Adding the label

Adding labels to forms is a best practice. By adding a label, you’ve made your form more accessible for screen readers, as well as to touch displays, as clicking on the label will place the form on the associated control. The label element supports sizing by just adding the appropriate col-*-* class to the element. In order for the label to be recognized by Bootstrap as a form label, the control-label class must also be added.

  1. <labelfor=”address” class=”control-label col-md-3″>Address:</label>

Adding the input control

The last item to add is the input control. In order for it to be recognized by Bootstrap, it must be decorated with the form-control class; if you forget that class the formatting won’t be correct. In addition, the form control itself cannot be sized by using col-*-*; in order to size the form control, you place it inside of a div tag decorated with the appropriate sizing class.