Search...
graphql
react

Select 2

Bootstrap 5 Select2

Bootstrap 5 Select is a component in our Contrast that displays a collapsible list of options. It may be used in forms, menus, and surveys.

Use the ↑ and ↓ arrow keys to browse between the options, and the ↵ key to choose the appropriate item with our Contrast Bootstrap 5 Select (does not works for stateless select).

Bootstrap Select2 Button

Give your div the class select2 to use the Contrast Bootstrap 5 Select2 Button in your project.

Choose an option
Option 1
Option 2
Option 3
Option 4
Option 5
HTML
html
<div class="select2">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>

Disable Select Button

To switch off your form select, use the disabled property.

Choose an option
Option 1
Option 2
Option 3
Option 4
Option 5
HTML
html
<div
            class="select2 disabled"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>


        </div>

Colored Select Button

Use the select2 class and add the color code for the color you want your choose choice to be. This will give your select component color.

Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
HTML
html
<div class="select2 select2-primary">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
<div class="select2 select2-secondary">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
<div class="select2 select2-success">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
<div class="select2 select2-danger">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
<div class="select2 select2-warning">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
<div class="select2 select2-dark">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>

Colored Options with Hover

The hoverColor property adds a hover effect to your choose options.

Choose an option
Select Option
Another Option
Option 3
Option 4
Last Option
HTML
html
<div class="select2 select2-danger hoverColor">
  <div id="div">
    <span class="option">
      Choose Option
    </span>
    <i class="fa fa-angle-down"></i>
  </div>
  <div id="options">
    <div>
      <i class="fa fa-facebook"></i>
      <span>Option 1</span>
    </div>
    <div>
      <i class="fa fa-twitter"></i>
      <span>Option 2</span>
    </div>
    <div>
      <i class="fa fa-instagram"></i>
      <span>Option 3</span>
    </div>
    <div>
      <span>Option 4</span>
    </div>
    <div>
      <span>Option 5</span>
    </div>
  </div>
</div>
JavaScript
js
<script>
      const select = document.querySelectorAll('.select2')
      for (let i = 0; i < select.length; i++) {
        const div = select[i].querySelector('#div')
        const options = select[i].querySelector('#options')
        div.addEventListener("click", () => {
          div.classList.toggle("active")
          options.classList.toggle("display")
          select[i].classList.toggle("shadow")
        })
        const option = options.querySelectorAll('div')
        for (let i = 0; i < option.length; i++) {
          option[i].addEventListener("click", () => {
            div.querySelector("span").innerHTML= option[i].innerHTML
          })
        }
      }
    </script>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Previous
Select
Next
Slider