Forms

Forms have also changed quite a bit in this version of Bootstrap. If you're migrating, this one's going to hurt. I almost think you should remove all the old classes and start from scratch.

Main Changes

• custom-* now form-*
• input-group-append/prepend
• Removed: .form-group .form-row .form-inline
• Add: form-label

Try it

Possibly the biggest change is that all of the form elements are now custom, so the custom classes for forms are gone. Now they're just renamed form-. This applies to checkboxes, select, range and others.

In the same way, input group-appends or prepend classes are gone, now you simply add buttons and input-group-text.

Form layout classes like from group, form row or form inline are now gone. You're encouraged to use the regular layout classes.

In the old version, labels didn't require any special classes. In this new version, a form-label class is required in order for labels to style properly.

Checkbox, Radio and Switches

• form-check-{OPT}

  • OPT: label input inline

• form-switch

• btn-check

Try it

You can add a form-select class to a select field with two size options.

Switches are coded exactly the same as checkboxes, except that they have the form-switch class added to the form-check container.

By default form-check groups will stack on top of one another, by adding the form-check-inline class, the layout of the form-check elements appear side by side.

The btn-check options lets you use buttons instead of checkboxes. I think it's hard to tell the difference between a checked and unchecked button unless you use outlines.

Floating Forms

form-floating

Try it

To create them, you need to have a placeholder on each input and whereas normally add labels before the inputs. With floating labels the inputs must come first. The label doesn't need a form-label class.

Check out the cool animation when you fill it out.