Bootstrap 5 Dropdowns Auto close behavior

Last Updated : 05 Dec, 2022

Bootstrap 5 Dropdowns Auto close behavior is used to make the dropdowns close when we click outside of that dropdown or that particular button. Getting close when the user clicks outside is a necessary feature that every dropdown should have.

Bootstrap 5 Dropdowns Auto close behavior Class: There is no pre-defined class to close the dropdown automatically by clicking outside. There is an attribute called data-bs-auto-close that can perform the tasks.

Bootstrap 5 Dropdowns Auto close behavior Attribute:

data-bs-auto-close: This attribute holds four values true, false, inside & outside, false does not allow to close the dropdown, and true does. Smae with the inside and outside click matter.

Syntax: The * can be substituted with any of the values like true, false, inside, or outside.

<div class="btn-group">
 <button class="btn dropdown-toggle" type="button"
   data-bs-toggle="dropdown" data-bs-auto-close="*" >
    ...
 </button>
</div>

Below examples illustrate the Bootstrap 5 Dropdowns Auto close behavior:

Example 1: In this example, we will learn about autoClose true and false options

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 class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> Dropdowns Auto close behavior</h3> 
        <div class="btn-group"> 
            <button class="btn btn-primary dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="true" 
                    aria-expanded="false"> 
                GeeksforGeeks AutoClose True 
            </button> 
            <ul class="dropdown-menu"> 
                <li><a class="dropdown-item" href="#">Java</a></li> 
                <li><a class="dropdown-item" href="#"> C++</a></li> 
                <li><a class="dropdown-item" href="#">C#</a></li> 
                <li><a class="dropdown-item" href="#">Python</a></li> 
            </ul> 
        </div> 
        <div class="btn-group"> 
            <button class="btn btn-success dropdown-toggle"
                    type="button" 
                    data-bs-toggle="dropdown" 
                    data-bs-auto-close="false" 
                    aria-expanded="false"> 
                GeeksforGeeks AutoClose False 
            </button> 
            <ul class="dropdown-menu"> 
                <li><a class="dropdown-item" href="#">Java</a></li> 
                <li><a class="dropdown-item" href="#"> C++</a></li> 
                <li><a class="dropdown-item" href="#">C#</a></li> 
                <li><a class="dropdown-item" href="#">Python</a></li> 
            </ul> 
        </div> 
        </div> 
</body> 
</html> 

Output:

Dropdown auto close behavior

Example 2: In this example, we will learn about autoClose inside and outside options

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 class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> Dropdowns Auto close behavior</h3> 
        <div class="btn-group"> 
            <button class="btn btn-primary dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="inside"
                    aria-expanded="false"> 
                GeeksforGeeks AutoClose Inside 
            </button> 
            <ul class="dropdown-menu"> 
                <li><a class="dropdown-item" href="#">Java</a></li> 
                <li><a class="dropdown-item" href="#"> C++</a></li> 
                <li><a class="dropdown-item" href="#">C#</a></li> 
                <li><a class="dropdown-item" href="#">Python</a></li> 
  
            </ul> 
        </div> 
        <div class="btn-group"> 
            <button class="btn btn-success dropdown-toggle" 
                    type="button" 
                    data-bs-toggle="dropdown" 
                    data-bs-auto-close="outside" 
                    aria-expanded="false"> 
                GeeksforGeeks AutoClose Outside 
            </button> 
            <ul class="dropdown-menu"> 
                <li><a class="dropdown-item" href="#">Java</a></li> 
                <li><a class="dropdown-item" href="#"> C++</a></li> 
                <li><a class="dropdown-item" href="#">C#</a></li> 
                <li><a class="dropdown-item" href="#">Python</a></li> 
  
            </ul> 
        </div> 
    </div> 
  
</body> 
  
</html> 