How To use Bootstrap-Select For Dropdown

Posted By Bajarangi soft , Posted On 10-10-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.

The example below represents how the default <select> element can be styled using .custom-select in Bootstrap.
Example:1

<!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">
   BAJARANGI SOFT
</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>

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:2

<!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: #ee7811">
   BAJARANGI SOFT
</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>

Related Post

How To Set Up Dropdown Menu In Appbar In Flutter App
Dynamic Dependent Dropdown With Jquery Using Laravel
How To Set Up Dropdown Menu With Flutter Android App
Change Item Text Size Of Dropdown In Flutter App
How To Search For Items In A Dropdown Menu Using JavaScript
How To Add Dropdown Form Field Using Flutter Android
How To Create A Cascading Dropdown List Using JavaScript
How To Create A Clickable Dropdown Menu Using JavaScript
How To Create Dropdown Sidebar Using CSS And JavaScript
How To Make table based on the value of dropdown Menu In JS