How to use bootstrap-select for dropdown ? - GeeksforGeeks

08 Jul, 2020
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
<!DOCTYPE html><html lang="en">  <head>    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">    <script src="https://kit.fontawesome.com/577845f6a5.js"         crossorigin="anonymous">    </script>      <!-- Optional JavaScript -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">    </script>    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>      <!-- CDN link used below is compatible with this example -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>      <!-- CDN link used below is compatible with this example -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?