×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Dropdown


Here in Bootstrap we can create the dropdown button by which user have to choose anyone from the list. And we use .dropdown class for it.

Let’s understand this by the following program:-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Dropdown Button</h2>

<div class="dropdown">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Fruits </button>

<div class="dropdown-menu">

<a class="dropdown-item" href="#">Apple</a>

<a class="dropdown-item" href="#">Banana</a>

<a class="dropdown-item" href="#">Litchi</a>

</div>

</div>

</body>

</html>

Output of this Program


Dropdown Button


So here we get our dropdown menu.






Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute