♦ Colored Dropdowns in BootStrap4
♣ Example3: Colored Dropdowns in BootStrap4
In this example, Colored DropDowns are illustrated. Example
Input:
x
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>BootStrap4 Colored DropDown</title>
5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
7
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
8
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
9
</head>
10
<style>
11
*{
12
margin: 0;
13
}
14
15
div{
16
margin: 0.5%;
17
display: inline;
18
}
19
20
</style>
21
<body>
22
23
<i><h2>BootStrap4 Colored DropDown</h2> </i>
24
<br><br>
25
26
<div class="dropdown">
27
<a class="btn btn-primary dropdown-toggle" type="button" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
28
Primary Planets
29
</a>
30
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
31
<a class="dropdown-item" href="#">Saturn</a>
32
<a class="dropdown-item" href="#">Neptune</a>
33
<a class="dropdown-item" href="#">Venus</a>
34
</div>
35
</div>
36
37
<div class="dropdown">
38
<a class="btn btn-secondary dropdown-toggle" type="button" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
39
Secondary Planets
40
</a>
41
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
42
<a class="dropdown-item" href="#">Saturn</a>
43
<a class="dropdown-item" href="#">Neptune</a>
44
<a class="dropdown-item" href="#">Venus</a>
45
</div>
46
</div>
47
48
49
<div class="dropdown">
50
<a class="btn btn-success dropdown-toggle" type="button" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
51
Success Planets
52
</a>
53
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
54
<a class="dropdown-item" href="#">Saturn</a>
55
<a class="dropdown-item" href="#">Neptune</a>
56
<a class="dropdown-item" href="#">Venus</a>
57
</div>
58
</div>
59
60
61
<div class="dropdown">
62
<a class="btn btn-danger dropdown-toggle" type="button" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
63
Danger Planets
64
</a>
65
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
66
<a class="dropdown-item" href="#">Saturn</a>
67
<a class="dropdown-item" href="#">Neptune</a>
68
<a class="dropdown-item" href="#">Venus</a>
69
</div>
70
</div>
71
72
</body>
73
</html>
74
Output: