Bootstrap 5 Dropdowns Active

Last Updated : 09 Dec, 2022

Bootstrap5 Dropdowns Active helps to set the state of any item in the dropdown menu as active. By default, the active item’s background color will be set to blue and the text color will be set to white to make it different from the surrounding items.

Dropdowns Active Class:

active: This class is used with a dropdown-item to make it active.

Syntax:

<ul class="dropdown-menu">
    <li>
        <a class="dropdown-item active" 
            href="#">
                ...
        </a>
    </li>
</ul>

Example 1: In this example, we will change the state of an item to active using the .active class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Dropdowns Active 
        </h2> 
    </div> 
    <div class="btn-group "> 
        <button type="button" 
                class="btn-success dropdown-toggle" 
                data-bs-toggle="dropdown" 
                data-bs-display="static"> 
            Select Course from GeeksforGeeks  
        </button> 
        <div class="dropdown-menu dropdown-menu-end "> 
            <a class="dropdown-item" 
               href="#"> 
                C Programming 
            </a> 
            <a class="dropdown-item" 
               href="#"> 
                C++ Programming 
            </a> 
            <a class="dropdown-item" 
               href="#"> 
                Java Programming 
            </a> 
            <a class="dropdown-item active" 
               href="#"> 
                I am Active 
            </a> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will learn how can we change the background color of the active item to red. We will be using the .bg-danger class to change the color to red.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Dropdowns Active 
        </h2> 
    </div> 
    <div class="btn-group "> 
        <button type="button" 
                class="btn-success dropdown-toggle" 
                data-bs-toggle="dropdown" 
                data-bs-display="static"> 
            Select Course from GeeksforGeeks  
        </button> 
        <div class="dropdown-menu dropdown-menu-end "> 
            <a class="dropdown-item" 
               href="#"> 
                C Programming 
            </a> 
            <a class="dropdown-item" 
               href="#"> 
                C++ Programming 
            </a> 
            <a class="dropdown-item" 
               href="#"> 
                Java Programming 
            </a> 
            <a class="dropdown-item active bg-danger" 
               href="#"> 
                I am Active 
            </a> 
        </div> 
    </div> 
    </div> 
</body> 
  
</html>