The Bootstrap 4 Select Picker is one of the components most commonly used inside forms. When having to add a select picker, the first option is the default Bootstrap 4 component. This will not style the dropdown menu where the options appear though. Another popular option is to create your own classes and add them to the <select> tag for restyling.
But one of the easiest solutions is to search for jQuery select pickers or open-source projects created specifically for this purpose. This way you will be sure that if you want to need new functionalities for your select picker, you will not have to write them yourself. In this article we will go through the most popular option and what are the pros and cons to using it. We will also show how to integrate and use the Bootstrap select picker with examples.
That being said, let us dig in!
-
Using the
.custom-selectBootstrap 4 Select Picker class
In order to use the Bootstrap 4 components, you need to import the CSS and JS files into your application. The easiest way is to use the CDNs. You will need to add the CSS file between the <head></head> tags:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And you will need to add the JavaScript libraries inside the <script></script> tags at the end of the document. The Bootstrap Javascript relies on jQuery and PopperJs, so you first need to import these 2.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Here is a starter template that you can use:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
If you don’t want to depend on CDNs (maybe your internet connection is shaky when you work on your project), you can download the Bootstrap source files from here. Once you have your CSS and JS, you will need to import them like in the case of the CDN, only you will use your local path. So, to import your files, you will need something like this:
<!-- for css --> <link rel="stylesheet" href="path/to/file/bootstrap.min.css"> <!-- for javascript --> <script type="text/javascript" src="path/to/file/bootstrap.min.js"></script>
If you have successfully imported the Bootstrap 4 files into your project, you can start using its components. The release of Bootstrap 4 has come with a few new elements. One of them is the .custom-select Bootstrap 4 class that styles the default select picker. To understand the difference between using it and not using it, here is an example:
See the Pen Bootstrap 4 Select Picker by cristina (@cristinaconacel) on CodePen.
You can also choose between sizes for the Bootstrap 4 select picker. Besides the default version, you can also make it large – by adding the .custom-select-lg class or small – by adding the .custom-select-sm class.
See the Pen Bootstrap 4 Select Picker Sizes by cristina (@cristinaconacel) on CodePen.
The Bootstrap 4 Custom Select Picker also supports the multiple attribute, giving you the possibility to select multiple options. Another useful option is the file browser. You can see the examples below:
See the Pen Bootstrap 4 Multiple Select Picker by cristina (@cristinaconacel) on CodePen.
You can also add a prepend or a button that describe what you are selecting within the Bootstrap 4 select picker. Here is how they look:
See the Pen Bootstrap 4 Select Picker with Prepend by cristina (@cristinaconacel) on CodePen.
2. Adding your custom style
If you feel that the Bootstrap 4 select picker options are enough for your needs, but the styling is not quite right, you can customise it. The easiest way to do this without having undesired effects is to add another class, along with the .custom-select. You can then write the style for it.
As an example, we have created a custom Bootstrap 4 select picker with rounded borders and a background colour. You can try to add any style that you want. If you are looking for inspiration, try searching ideas on Dribbble.
See the Pen Bootstrap 4 Custom Select Picker by cristina (@cristinaconacel) on CodePen.
3. Integrating a third-party plugin
The Boostrap Select Picker plugin is a library for supporting work with select inputs. The basic setup will show a simple select box and the styling for the dropdown will be the same as the one for the Bootstrap 4 dropdown. This is a plus, since your design will be consistent across your project. Along with the default possibilities for a select picker, you will get several options for customisation. This is where the true power of the plugin is obvious. There are extensive ways to style the appearance of the Bootstrap 4 select picker and several great features that you can use for custom actions.
Our advice is that if you know you will have a heavy form that requires lots of select options, you give this plugin a try. Otherwise, if you only want a simple select picker, the default Bootstrap 4 select picker styling will do.
If you decided to go forward with the plugin, you will need to import the CSS and JS files to get started. The plugin requires the Bootstrap framework, so you first need to have their source files imported (via CDN or local files). You can also choose between an external or internal source for the plugin files.
To make use of their CDN, you will need the following files (CSS file inside the head tags and scripts at the end of the document):
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>
If you prefer to download the files locally, you can get them here from GitHub.
Here is a starter template that you can use to get started with the Bootstrap Select Picker plugin:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>
</body>
</html>
Once you have your file in place, you can add the selectpicker. Their documentationis a great place to start understanding how to use the plugin and all its capabilities. We will also show some of the functionalities below, if you want to just copy-paste them to your project.
Basic Select Picker
Let’s start with 2 basic examples with the options appearing as a dropdown (default) or as a dropup. The basic class for the select is .selectpicker. This class will be used in all examples. The other classes come as an add-on to this class. To make it a dropup, you will also need the .dropup class.
See the Pen Bootstrap Select Plugin Basic Examples by cristina (@cristinaconacel) on CodePen.
Disabled Select Picker
The plugin supports the “disabled” attribute. In this way the options for choosing are closed.
See the Pen Bootstrap Select Picker Plugin Disabled by cristina (@cristinaconacel) on CodePen.
Multiple Select Picker
You can add a multiple select by using the multipleattribute on the selectpicker. And you can have select boxes with optgroups by wrapping the options in optgroups. Adding disabledto an option or option group will make them inaccessible. Here are some examples:
See the Pen Bootstrap Select Picker Plugin Multiple Options by cristina (@cristinaconacel) on CodePen.
Styling the Select Picker
There are multiple options for styling. The most useful one is changing the appearance to a button. You can use all the Bootstrap 4 button classes via the data-styleattribute. Here is an example of a select picker that looks like a .btn-info:
See the Pen Bootstrap Select Picker Plugin Example with Button by cristina (@cristinaconacel) on CodePen.
Select Picker with Search
Sometimes you will have a lot of options to choose from and it might be hard to find the option you are looking for. This is where the search functionality comes in handy. By adding the data-live-search="true"attribute to the selectpicker, a search input will appear at the start of the dropdown. You will be able to easily search your option and pick it. Here is an example:
See the Pen Bootstrap Select Picker Plugin Example with Search by cristina (@cristinaconacel) on CodePen.
There are a lot more options for styling and functionalities that you can use, so be sure to look at their official examples. The Bootstrap 4 Select Picker Plugin also comes with a lot of options and you can find the documentation for them here. If you are experienced with JavaScript, you can also access the methods.
Besides using the plugin mentioned before, there is also the possibility to create your own select picker (might take you some time if you are starting from scratch). And another popular option is to use an UI Kit. UI Kits are what you could call a “super-theme”. They usually are already importing the missing Bootstrap components and redesigning them to fit with the rest of the design. If you think this might be an interesting option, here is a list of UI Kits that we have written about (as a disclaimer, most of the products in the list have the select picker as a PRO component).
The resources used for this tutorial are:
- The Official Bootstrap Documentation
- jQuery Select Picker
- Bootstrap 4 Select Picker by SnapAppoinments
If you have questions about the Bootstrap 4 select picker, please check the official documentation for Bootstrap 4 and the Select Picker Plugin and also let me know in the comments. The code for these examples is available to you via Codepen. You can copy and paste the parts you need to your project or download the source files. Let me know how it goes!
