How to use selectpicker in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to use selectpicker in bootstrap with code example.

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. Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

This article will guide you to adding hex color in Bootstrap with example.

Step 1: Includes bootstrap view

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

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

Step 3: Define its class name

After that, create the use selectpicker with a class name .selectpicker.

<h1 style="color: rgb(78, 85, 222)">Domino's carside delivery</h1>
<select class="selectpicker" data-style="btn-danger">
  <option>Pizzas</option>
  <option>Burger</option>
  <option>Ice Cream</option>
  <option>Fried Potatoes</option>
</select>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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: rgb(78, 85, 222)">Domino's carside delivery</h1>
    <select class="selectpicker" data-style="btn-danger">
      <option>Pizzas</option>
      <option>Burger</option>
      <option>Ice Cream</option>
      <option>Fried Potatoes</option>
    </select>
  </body>
</html>

Check the output of the above code example.

Bootstrap, Selectpicker

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts