In bootstrap dropdown are used to show links which toggleable properties. It makes the dropdown responsive while different bootstrap classes can used like contextual etc.
Example of dropdown
In this example bootstrap class dropdown
is used
and inside it a menu for drown is inserted.
<
div
class
="
dropdown
"
>
<
button
class
="
btn btn-primary dropdown-toggle
"
type
="
button
"
id
="
dropdownButton
"
data-toggle
="
dropdown
"
>
Dropdown button<
/button
>
<
div
class
="
dropdown-menu
"
aria-labelledby
="
dropdownButton
"
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 1<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 2<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Linke 3<
/a
>
<
/div
>
<
/div
>
Output of above code
Dropdown Divider
In this example a basic dropdown is used
and inside the dropdown menu a bootstrap
class dropdown-divider
is inserted
to make another dropdown list inside the dropdown
menu.
<
div
class
="
btn-group
"
>
<
button
type
="
button
"
class
="
btn btn-primary dropdown-toggle
"
data-toggle
="
dropdown
"
>
Courses<
/button
>
<
div
class
="
dropdown-menu
"
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Course 1<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Course 2<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Course 3<
/a
>
<
div
class
="
dropdown-divider
"
>
<
/div
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Mega Menu<
/a
>
<
/div
>
<
/div
>
Output of above code
Dropup menu
In this example bootstrap class dropup
class
is used to show links in upper side.
<
div
class
="
dropup show
"
>
<
button
class
="
btn btn-primary dropdown-toggle
"
role
="
button
"
data-toggle
="
dropdown
"
>
Dropup links<
/button
>
<
div
class
="
dropdown-menu
"
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 1<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 2<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 3<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 4<
/a
>
<
/div
>
<
/div
>
Output of above code
Dropleft menu
In this example bootstrap class dropleft
is
used to show links in left side.
<
div
class
="
dropleft show
"
>
<
button
class
="
btn btn-primary dropdown-toggle
"
role
="
button
"
data-toggle
="
dropdown
"
>
Dropup links<
/button
>
<
div
class
="
dropdown-menu
"
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 1<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 2<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 3<
/a
>
<
a
class
="
dropdown-item
"
href
="
#
"
>
Link 4<
/a
>
<
/div
>
<
/div
>
Output of above code
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.