Bootstrap 3 Essential Training, Formatting radio and checkbox controls

There’s a couple of extra options that you have to keep in mind when working with radio and button type input fields. So, let’s take a look at the things that we can do. In this example, I have a super simple form with a regular input field, as well as another section with two checkboxes.

Now, just to review, to organize normal input fields into groups for proper spacing, you put them inside a div with a class of form-group, like this. When you do checkboxes or radio buttons, you place controls inside a div with a class naming the type of control, so you add a div with a class of checkbox, like this.  

And what’s different about this is that the labels are wrapped around the control instead of traditionally placed next to the controls and don’t have a for attribute.

So we can see this label right here, it doesn’t have the for attribute, like this label up here, and this one is on top of the input field, whereas, this other label, the One name right here, is sort of embedded inside the label and that’s why it doesn’t need this for input type.  

Leave a Reply

Notify of