Bootstrap checkbox list

How about building an elegant, yet simple checkbox list form — neatly formatted and optionally also with images?

Bootstrap gives us an easy, responsive way to display checkboxes and radio buttons on our site. These controls are flexible, easy to customize, and once you understand the code, can be used in various other creative ways.

This article explores how to use these controls and the supporting divs to give us a really beautiful-looking, custom checkbox list form.

Alright, let's do it!

Checkboxes are just another way to present a list of options. They are commonly used in product reviews, contact forms, and survey forms.

When to use a checkbox list in web design?

Checkboxes are usually used as an alternative to radio buttons when you want to give your users more than two choices at once. For example, if you have three products for sale, you could allow the user to select one or more of them for comparison against other products.

Checkbox lists are also helpful when you want to present several options that might not be mutually exclusive (for example: "Yes", "No", or "Maybe").

When not to use a checkbox list in web design?

A checkbox list is a great way to collect user input on a form, but it's not always the best solution.

In some cases, you might want to use simple text fields instead of checkboxes. This is especially true when you need to capture text input that isn't boolean in nature (ie: yes/no).

If you're asking users to enter a date or time, checkboxes won't work. Instead, use regular text fields and set them up as date pickers or time pickers with jQuery UI or Bootstrap UI components.

Checkboxes can be confusing for users who aren't familiar with them. If your audience includes people who aren't tech-savvy, then you should avoid using checkboxes for data entry whenever possible.

If you liked this snippet, you might also enjoy exploring Bootstrap Masonry or Bootstrap Smooth Scroll .