Open In App

How to use bootstrap-select for dropdown ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Bootstrap Select is a form control that shows a collapsible 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




<!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>


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




<!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>


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




<!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>


Output:



Last Updated : 11 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads