- 23 students
- 13 lessons
- 0 quizzes
- 10 week duration
-
Basics
- Starting Bootstrap
- The Bootstrap Grid System
- Bootstrap Colors
- Bootstrap Tables
- Bootstrap Spinners
- Bootstrap Buttons — Spinners
- Bootstrap Button Groups
- How to design a Dropdown Menu in Bootstrap
- Bootstrap Forms
- Simple Bootstrap Validation
- Bootstrap Carousel-1
- Creating a Navigation Bar with Bootstrap
- How to create a Bootstrap Theme?
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>
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>
