Learn to use Bootstrap select (dropdown): 3 demos

Learn to use Bootstrap select (dropdown): 3 demos

Learn to use Bootstrap select (dropdown): 3 demos

Bootstrap Select

The Bootstrap framework includes a number of CSS classes related to building HTML forms with Bootstrap in your web documents. By simply including classes into <form> tag or <input> types you can build beautiful forms using Bootstrap for a website that is responsive to all kind of devices as well.

The dropdown is created by using the <select> tag that uses CSS class provided by Bootstrap to make it look beautiful. You can create a select dropdown where a user can select just one option or multiple options. Examples of creating both types with different classes are shown below.

Example of a basic select with single select option

Following example shows how to create a Bootstrap select dropdown with single selection option. For illustration, we have created another dropdown without Bootstrap class (form-control) to show the difference.

Bootstrap select

Experience this online

By default, the select in Bootstrap will take the full available width while using Bootstrap CSS class. For smaller size see example below.

Example of select with smaller size in Bootstrap form

Following example shows how to use select, that is smaller in size with other form elements.

Bootstrap select form

Experience this online

You can see, a “Create account” form with Gender dropdown. The size of the dropdown is set by using “col-sm-2” class. If you want to increase or decrease the size, try it by increasing or decreasing number from 2 to other. A bigger number means larger size.

Bootstrap Select with multiple option selection

You can create twitter bootstrap select with multiple selection options by adding “multiple” attribute just like in other HTML forms. See example below:

Experience this online

Just like other forms, press the Ctrl key for selecting multiple options.

Useful links: Twitter Bootstrap Tutorial | Bootstrap table| Bootstrap Form

Related Articles

Leave A Comment?