Bootstrap

champak
Bootstrap
₹2,000.00 ₹1,500.00
  • 22 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

How to design a Dropdown Menu in Bootstrap

A dropdown menu is a toggle system that opens and closes per click and allows users to choose from a list of options. It is used when extra options need to be placed in a small space.

To achieve this you place a div with class equal to “dropdown” and then add a button(span or any other control would work as well)  with data-toggle =”dropdown”. Then add a div with class=”dropdown-menu” inside the “dropdown” div. The button click will make it toggle.

To start with we place a div and add the .dropdown class. Then write code for a button and place it inside the div and write  data-toggle=”dropdown”.

Add a div inside the first div and add the class dropdown-menu to it.

Add some extra content  to the div and run the page. Try clicking the button now. The visibility of the inner div will toggle. 


<!DOCTYPE html>
<html>
<head>
<title>Dropdown</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="dropdown">
<button type="button" data-toggle="dropdown">
Toggle
</button>

<div class="dropdown-menu">
This is Hidden
</div>

</div>

</body>
</html>

View the

demo

here.
The toggle does not necessarily have to be a button. Nor is the div the only possible item The dropdown will also close if you click any where out side the inner div.

 

Let us add a some links


<!DOCTYPE html>
<html>
<head>
<title>Dropdown</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="dropdown">
<button data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="http://champaksworld.com/courses/" target="newpage">Courses</a>
<a class="dropdown-item" href="http://champaksworld.com/dologin?action=register" target="newpage">Registers</a>
<a class="dropdown-item" href="http://champaksworld.com/dologin" target="newpage">Login</a>
</div>
</div>
</body>
</html>

demo

To make it classier add class=”btn btn-primary” to the button.


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

 


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

Leave a Reply

Your email address will not be published. Required fields are marked *