Bootstrap Dropdowns

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Dropdowns

Post by C0D3D »

Creating dropdown menu in Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adding Dropdowns in Bootstrap via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Dropdown</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
        </div>
    </div>
</div>
</body>
</html>

Adding dropdowns to Bootstrap navbar

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within a Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">Brand</a>
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Profile</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Inbox</a>
                            <a href="#" class="dropdown-item">Drafts</a>
                            <a href="#" class="dropdown-item">Sent Items</a>
                            <div class="dropdown-divider"></div>
                            <a href="#"class="dropdown-item">Trash</a>
                        </div>
                    </li>
                </ul>
                <ul class="nav navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="#" class="dropdown-item">Reports</a>
                            <a href="#" class="dropdown-item">Settings</a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item">Logout</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>    
</div>
</body>
</html>

Adding dropdowns to Bootstrap navs

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within a Nav</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <ul class="nav nav-pills mb-5">
        <li class="nav-item">
            <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profile</a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Inbox</a>
                <a href="#" class="dropdown-item">Drafts</a>
                <a href="#" class="dropdown-item">Sent Items</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Trash</a>
            </div>
        </li>
        <li class="nav-item dropdown ms-auto">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
            <div class="dropdown-menu dropdown-menu-end">
                <a href="#" class="dropdown-item">Reports</a>
                <a href="#" class="dropdown-item">Settings</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Logout</a>
            </div>
        </li>
    </ul>
    <hr>
    <ul class="nav nav-tabs mt-5">
        <li class="nav-item">
            <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profile</a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Inbox</a>
                <a href="#" class="dropdown-item">Drafts</a>
                <a href="#" class="dropdown-item">Sent Items</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Trash</a>
            </div>
        </li>
        <li class="nav-item dropdown ms-auto">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
            <div class="dropdown-menu dropdown-menu-end">
                <a href="#" class="dropdown-item">Reports</a>
                <a href="#" class="dropdown-item">Settings</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Logout</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Adding dropdowns to Bootstrap buttons

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Secondary</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">Success</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">Info</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">Warning</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">Danger</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>
</body>
</html>

Adding dropdowns to Bootstrap split buttons

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within Split Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>
</body>
</html>

Adding dropdowns to Bootstrap button groups

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within Button Group</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button</button>
        <button type="button" class="btn btn-primary">Another Button</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Adding dropdowns within Bootstrap vertically stacked button groups

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdowns within Vertically Stacked Button Group</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Button</button>
        <button type="button" class="btn btn-primary">Another Button</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Creating dropup, dropleft and dropright menus in Bootstrap

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropup, Dropleft and Dropright Menus</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 200px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p><strong>Note:</strong> Dropdown direction may be adjusted if there is not enough space around the button to show the specified dropdown.</p>
  
    <!-- Dropup menu -->
    <div class="btn-group dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>

  	<!-- Dropleft menu -->
    <div class="btn-group dropstart">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropleft</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>

    <!-- Dropright menu -->
    <div class="btn-group dropend">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropright</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>
</body>
</html>

Creating right aligned dropdown menus in Bootstrap

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Right Aligned Dropdown Menus</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 50px 200px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Right-aligned Dropdown Menu</button>
        <div class="dropdown-menu dropdown-menu-end">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>
</body>
</html>


Adding headers to dropdown items in Bootstrap

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adding Headers to Bootstrap Dropdowns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-5">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Products</button>
        <div class="dropdown-menu">
            <div class="dropdown-header">ELECTRONICS</div>
            <a href="#" class="dropdown-item">Mobiles</a>
            <a href="#" class="dropdown-item">Tablets</a>
            <a href="#" class="dropdown-item">Laptops</a>
            <div class="dropdown-header">FASHION</div>
            <a href="#" class="dropdown-item">Clothing</a>
            <a href="#" class="dropdown-item">Sunglasses</a>
        </div>
    </div>
</div>
</body>
</html>


Disabling items inside a dropdown menu in Bootstrap

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disabling Links inside Bootstrap Dropdowns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-5">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Reports</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">View</a>
            <a href="#" class="dropdown-item">Download</a>
            <a href="#" class="dropdown-item disabled" tabindex="-1">Edit / Delete</a>
        </div>
    </div>
</div>
</body>
</html>

Adding dropdown to an element via JavaScript

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable Bootstrap Dropdowns via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var dropdownElementList = [].slice.call(document.querySelectorAll(".dropdown-toggle"));
    var dropdownList = dropdownElementList.map(function(element){
        return new bootstrap.Dropdown(element)
    });
});
</script>
</head>
<body>
<div class="m-4">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Reports</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">View</a>
            <a href="#" class="dropdown-item">Download</a>
            <a href="#" class="dropdown-item disabled" tabindex="-1">Edit / Delete</a>
        </div>
    </div>
</div>
</body>
</html>



Bootstrap toggle() dropdown method

Example 13

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Dropdown Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var toggleBtn = document.getElementById("toggleBtn");
    var updateBtn = document.getElementById("updateBtn");
    var disposeBtn = document.getElementById("disposeBtn");
    
    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(document.getElementById("myDropdown"));
    
    showBtn.addEventListener("click", function(){
        myDropdown.show();
    });
    
    hideBtn.addEventListener("click", function(){
        myDropdown.hide();
    });
    
    toggleBtn.addEventListener("click", function(){
        myDropdown.toggle();
    });
        
    updateBtn.addEventListener("click", function(){
        myDropdown.update();
    });
    
    disposeBtn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
</script>
</head>
<body>
<div class="m-5">
    <button type="button" class="btn btn-secondary" id="showBtn">Show</button>
    <button type="button" class="btn btn-secondary" id="hideBtn">Hide</button>
    <button type="button" class="btn btn-secondary" id="toggleBtn">Toggle</button>
    <button type="button" class="btn btn-secondary" id="updateBtn">Update</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Bootstrap show() dropdown method

Example 14

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Dropdown Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var toggleBtn = document.getElementById("toggleBtn");
    var updateBtn = document.getElementById("updateBtn");
    var disposeBtn = document.getElementById("disposeBtn");
    
    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(document.getElementById("myDropdown"));
    
    showBtn.addEventListener("click", function(){
        myDropdown.show();
    });
    
    hideBtn.addEventListener("click", function(){
        myDropdown.hide();
    });
    
    toggleBtn.addEventListener("click", function(){
        myDropdown.toggle();
    });
        
    updateBtn.addEventListener("click", function(){
        myDropdown.update();
    });
    
    disposeBtn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
</script>
</head>
<body>
<div class="m-5">
    <button type="button" class="btn btn-secondary" id="showBtn">Show</button>
    <button type="button" class="btn btn-secondary" id="hideBtn">Hide</button>
    <button type="button" class="btn btn-secondary" id="toggleBtn">Toggle</button>
    <button type="button" class="btn btn-secondary" id="updateBtn">Update</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Bootstrap hide() dropdown method

Example 15

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Dropdown Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var toggleBtn = document.getElementById("toggleBtn");
    var updateBtn = document.getElementById("updateBtn");
    var disposeBtn = document.getElementById("disposeBtn");
    
    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(document.getElementById("myDropdown"));
    
    showBtn.addEventListener("click", function(){
        myDropdown.show();
    });
    
    hideBtn.addEventListener("click", function(){
        myDropdown.hide();
    });
    
    toggleBtn.addEventListener("click", function(){
        myDropdown.toggle();
    });
        
    updateBtn.addEventListener("click", function(){
        myDropdown.update();
    });
    
    disposeBtn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
</script>
</head>
<body>
<div class="m-5">
    <button type="button" class="btn btn-secondary" id="showBtn">Show</button>
    <button type="button" class="btn btn-secondary" id="hideBtn">Hide</button>
    <button type="button" class="btn btn-secondary" id="toggleBtn">Toggle</button>
    <button type="button" class="btn btn-secondary" id="updateBtn">Update</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Bootstrap update() dropdown method

Example 16

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Dropdown Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var toggleBtn = document.getElementById("toggleBtn");
    var updateBtn = document.getElementById("updateBtn");
    var disposeBtn = document.getElementById("disposeBtn");
    
    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(document.getElementById("myDropdown"));
    
    showBtn.addEventListener("click", function(){
        myDropdown.show();
    });
    
    hideBtn.addEventListener("click", function(){
        myDropdown.hide();
    });
    
    toggleBtn.addEventListener("click", function(){
        myDropdown.toggle();
    });
        
    updateBtn.addEventListener("click", function(){
        myDropdown.update();
    });
    
    disposeBtn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
</script>
</head>
<body>
<div class="m-5">
    <button type="button" class="btn btn-secondary" id="showBtn">Show</button>
    <button type="button" class="btn btn-secondary" id="hideBtn">Hide</button>
    <button type="button" class="btn btn-secondary" id="toggleBtn">Toggle</button>
    <button type="button" class="btn btn-secondary" id="updateBtn">Update</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Bootstrap dispose() dropdown method

Example 17

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Dropdown Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var toggleBtn = document.getElementById("toggleBtn");
    var updateBtn = document.getElementById("updateBtn");
    var disposeBtn = document.getElementById("disposeBtn");
    
    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(document.getElementById("myDropdown"));
    
    showBtn.addEventListener("click", function(){
        myDropdown.show();
    });
    
    hideBtn.addEventListener("click", function(){
        myDropdown.hide();
    });
    
    toggleBtn.addEventListener("click", function(){
        myDropdown.toggle();
    });
        
    updateBtn.addEventListener("click", function(){
        myDropdown.update();
    });
    
    disposeBtn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
</script>
</head>
<body>
<div class="m-5">
    <button type="button" class="btn btn-secondary" id="showBtn">Show</button>
    <button type="button" class="btn btn-secondary" id="hideBtn">Hide</button>
    <button type="button" class="btn btn-secondary" id="toggleBtn">Toggle</button>
    <button type="button" class="btn btn-secondary" id="updateBtn">Update</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Bootstrap getInstance() dropdown method

Example 18

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Dropdown Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    btn.addEventListener("click", function(){
        var myDropdown = bootstrap.Dropdown.getInstance(element);
        console.log(myDropdown);
    });
});
</script>
</head>
<body>
<div class="m-4">
  	<p>First activate dropdown by clicking the "Dropdown" button, then press the "Get Dropdown Instance" button to get the dropdown instance associated with a DOM element.</p>
    <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
  	<button type="button" class="btn btn-secondary" id="myBtn">Get Dropdown Instance</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Bootstrap getOrCreateInstance() dropdown method

Example 19

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get or Create Bootstrap Dropdown Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    btn.addEventListener("click", function(){
        var myDropdown = bootstrap.Dropdown.getOrCreateInstance(element);
        console.log(myDropdown);
    });
});
</script>
</head>
<body>
<div class="m-4">
  	<p class="mt-4">Press the "Get or Create Dropdown Instance" button to create dropdown instance or get the dropdown instance associated with a DOM element. <strong>Dropdown will not work until you create dropdown instance</strong>.</p>
    <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
  	<button type="button" class="btn btn-secondary" id="myBtn">Get or Create Dropdown Instance</button>
    <hr>
    <div class="dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" id="myDropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Get the text content of dropdown link on click in Bootstrap

Example 20

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listening to Bootstrap Dropdown Events Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var dropdownList = [].slice.call(document.querySelectorAll(".dropdown"));
    dropdownList.forEach(function(dropdown){
        dropdown.addEventListener("show.bs.dropdown", function(e){
            var linkText = e.relatedTarget.innerText; // Get the link text
        	alert("Click on OK button to view the dropdown menu for - " + linkText);
        });
    });
});
</script>
</head>
<body>
<div class="m-5">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profile</a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Inbox</a>
                <a href="#" class="dropdown-item">Drafts</a>
                <a href="#" class="dropdown-item">Sent Items</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Trash</a>
            </div>
        </li>
        <li class="nav-item dropdown ms-auto">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Reports</a>
                <a href="#" class="dropdown-item">Settings</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Logout</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests