How to use bootstrap-select for dropdown ?

Bootstrap Select is a form control that shows a collapsable list of different values that can be selected. This can be used for displaying forms or menus to the user. This article shows the methods by which a <select> element can be styled in Bootstrap, using both custom styles and bootstrap-select.

Using the default custom styles: Bootstrap has custom styles that can be applied to some form elements. Custom select menus require only one custom class, that is, .custom-select to trigger the custom styles. However, custom styles are restricted to the select’s initial appearance and cannot alter the option’s due to browser limitation. The example below represents how the default <select> element can be styled using .custom-select in Bootstrap.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
    </script>
  
    <!-- Optional JavaScript -->
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <!-- Use the custom-select class -->
    <select class="custom-select" 
            style="width:150px;">
        <option>Pizzas</option>
        <option>Burger</option>
        <option>Ice Cream</option>
        <option>Fried Potatoes</option>
    </select>
</body>
  
</html>

chevron_right


Output:



There are only some style properties that can be applied to the <option> component. This is because this sort of component is a case of a “replaced component”. They are OS-dependent and are not the portion of the HTML/browser. It cannot be styled through CSS. Except for background-color and color, the style settings applied through the style object for the <option> component are disregarded.

The select option is styled by the Operating System, not by HTML. Hence the CSS style does not have any impact.

option { 
    background-color: color; 
    border-radius: value; 
    font-size: value 
}

In general, the above values will work. However, we can not customize the padding, margin, and other properties.

Bootstrap-select: To solve the above problems, bootstrap-select can be used to style <option> and <select> tags. 

Note: By default, bootstrap-select naturally recognizes the version of Bootstrap that is being used. However, there are a few occurrences where the version detection may not work.

The below example shows how bootstrap-select can be included in the page and initialized. The selectpicker class is used in the select components to auto-initialize bootstrap-select as explained in the example:

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <!-- CDN link used below is compatible with this example -->
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <select class="selectpicker" 
        data-style="btn-success">
        <option>Pizzas</option>
        <option>Burger</option>
        <option>Ice Cream</option>
        <option>Fried Potatoes</option>
    </select>
</body>
  
</html>

chevron_right


Output:



Below are some attributes that can be used to style the <select> tag:

  • data-live-search: It allows us to add a search input.
  • data-tokens: It allows us to add keywords to options to improve their search ability.
  • data-max-options: It allows us to specify the limit the number of options that can be selected. It also works for option groups.
  • title: This attribute allows us to set the default placeholder text when nothing is selected.
  • data-style: This attribute helps us to style the button classes.
  • show-tick: This attribute helps us to show the checkmark icon on standard select boxes.
  • data-width: This attribute helps us to set the width of the select.

Below are some attributes that can be used to style the <option> tag:

  • data-icon: It is used to add an icon to an <option> or <optgroup>.
  • data-content: It is used to insert custom HTML into the <option>.
  • data-subtext: It is used to add a subtext to an <option> or <optgroup> element.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <!-- CDN link used below is compatible with this example -->
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <!-- Using the attributes to style the 
        <select> and <option> tag -->
    <select class="selectpicker">
        <option data-content=
"<span class='badge badge-danger'>Pizzas</span>">
            Pizzas
        </option>
        <option data-content=
"<span class='badge badge-success'>Burger</span>">
            Burger
        </option>
        <option data-content=
"<span class='badge badge-primary'>Ice Cream</span>">
            Ice Cream
        </option>
        <option data-content=
"<span class='badge badge-warning'>Fried Potatoes</span>">
            Fried Potatoes
        </option>
    </select>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.