Bootstrap select – Learn to use with 5 beautiful styles

The Bootstrap select – option

The select – option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes. You may use simple Bootstrap classes, customized CSS or third party add-ons to create beautiful looking select dropdowns. I am going to show you both.

The simple select can be created by Bootstrap class in the select tag as follows:

For example:

6.1-Bootstrap-select-simple

See online demo and code

You can see the figure and demo page, the first select is created without using any class while the second is assigned the form-control Bootstrap class.

Adding custom style in Bootstrap select demo

You may assign the Bootstrap class as well as custom style to change the look and feel of the select dropdown.

In the following example, I have created a custom class which is assigned in addition to the form-control class in the select tag. See online demo and code:

Bootstrap select custom

See online demo and code

In the head section, a CSS class is created which is assigned to the select dropdown as follows:

Related: Dropdown as a multi-select button using Bootstrap

Select in a Bootstrap form example

Let me show an example of using the select in a Bootstrap form along with other controls. The controls like textboxes, button and select are using Bootstrap as well as a custom class. First have a look at demo and code:

Bootstrap select form

See online demo and code

Two select tags are used that are assigned Bootstrap class, form-control. Along with it, both are assigned inputstl custom class to style along with other form fields.

The Gender select is created to choose only one option.

By using the multiple option in the Expertise select dropdown, you can choose multiple options:

You should also read: Bootstrap multi-select dropdown

Using a plug-in for select Bootstrap

Now, I will show you creating pretty looking select dropdowns by using the Bootstrap-select add-on. Not only the look and feel can be changed but it adds many useful features in select buttons. By using that, the user experience can be enhanced incredibly.

First, let me show you a few select button examples followed by step by step guide to set up to use for your project.

Bootstrap select

See online demo and code

The above select dropdown allows selecting multiple options while it also slides down just like the normal (single option) dropdown.  However, you can see the demo page, how cool it is looking. It used the btn-primary button style of Bootstrap add-on.

The select tag is given the selectpicker class, that you can use after setting up the plug-in (explained below).

To give it bluish look, the data-style attribute is used i.e. data-style=”btn-primary”. The user can make maximum two selection which is specified here:

 

This is also the feature of this add-on.

A select with option groups example

You may add option groups while using this plug-in as well. That means a separator will be added between groups. See below to better understand:

Bootstrap select option

See online demo and code

You can see in the demo, the “Web” section is separated to “Programming” section in the dropdown. By removing the option data-max-options=”2″, you may allow to select only one option in the dropdown.

The code for select dropdown in that example is:

 

Adding search facility in select

Another great feature of this plug-in is the search box. If you have a long list of options in the dropdown, for example, the “select country” dropdown, this feature becomes really cool.

By adding this attribute:

data-live-search=”true”

in the select tag, a search textbox will be added in the dropdown. As a user enters a letter, it will filter the options accordingly. See the live demo by clicking the link or image below:

Bootstrap select search

See online demo and code

The code of the above example is changed slightly for the select tag as below:

 

There are many other features that you should go through if you intend to use this plug-in.

Setting up Bootstrap-select plug-in

To set up the Bootstrap-select plug-in follows these steps:

Step 1:

Add the Bootstrap CSS and JS libraries (That you should already while working with Bootstrap framework). If not these are CDN links:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

Step 2:

You also have to include jQuery library for that (if not already using it):

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

Step 3:

Include plug-in files in the head section of the page as well (available from CDN):

The CSS file:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css”>

The JS file:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js”></script>

So basically you need these two additional files if you are already using Bootstrap framework and jQuery. These are small in size, so worth trying it.

Step 4:

Start adding select tags with plug-in classes like shown in the above examples. For instance:

A select with multi-select option code

 

Select with option groups

 

Select with search

 

For more info and documentation go to the following link:

Credits and source: plug-in page in github