Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 Dropdowns Active

Improve Article
Save Article
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

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=
          rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
            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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
            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>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#active


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!