Dropdowns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Trigger Dropdowns On A Button Or A Link
Code Snippet To Achieve The Above Results
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-primary dropdown-toggle wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
Button
</button>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<h6 class = "dropdown-header">User Dashboard</h6>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-tachometer"></i>My
Dashboard</a>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-user"></i>My Profile</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-cogs"></i>Settings</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-question"></i>Support</a>
<a class = "dropdown-item" href = "#"><i
class = "fas fa fa-info-circle"></i>Documentation</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-bug"></i>Report a Bug</a>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-secondary dropdown-toggle wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
Button
</button>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<h6 class = "dropdown-header">User Dashboard</h6>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-tachometer"></i>My
Dashboard</a>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-user"></i>My Profile</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-cogs"></i>Settings</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-question"></i>Support</a>
<a class = "dropdown-item" href = "#"><i
class = "fas fa fa-info-circle"></i>Documentation</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-bug"></i>Report a Bug</a>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-outline-secondary wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<i class = "fas fa fa-bars"></i>
Button
</button>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<h6 class = "dropdown-header">User Dashboard</h6>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-tachometer"></i>My
Dashboard</a>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-user"></i>My Profile</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-cogs"></i>Settings</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-question"></i>Support</a>
<a class = "dropdown-item" href = "#"><i
class = "fas fa fa-info-circle"></i>Documentation</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-bug"></i>Report a Bug</a>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-danger wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
Button
<i class = "fas fa fa-bars"></i>
</button>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<h6 class = "dropdown-header">User Dashboard</h6>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-tachometer"></i>My
Dashboard</a>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-user"></i>My Profile</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-cogs"></i>Settings</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-question"></i>Support</a>
<a class = "dropdown-item" href = "#"><i
class = "fas fa fa-info-circle"></i>Documentation</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-bug"></i>Report a Bug</a>
</div>
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Preferred Content Within Dropdowns
My Cart
Red T-Shirt
$39.99 Per Pcs
Red T-Shirt
$39.99 Per Pcs
Total
$199
Notifications
Below are the unread notifications
You Purchased a T-Shirt
You Purchased a T-Shirt
You account has been created
Code Snippet To Achieve The Above Results
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-outline-secondary wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<i class = "fas fa fa-shopping-cart"></i>
</button>
<div class = "dropdown-menu" style = "width:250px;" aria-labelledby = "dropdownMenuButton">
<h6 class = "dropdown-header">My Cart</h6>
<div class = "container">
<div class = "row mt-4 mb-2">
<div class = "col-3"><img style = "width: 45px;"
src = "/assets/images/product.jpg" />
</div>
<div class = "col-7 align-self-center">
<div class = "text-dark">Red T-Shirt</div>
<div class = "text-sm-left">$39.99 Per Pcs</div>
</div>
<div class = "col-2 align-self-center"><i class = "fas fa fa-times"></i></div>
</div>
<div class = "row mt-4 mb-2">
<div class = "col-3"><img style = "width: 45px;"
src = "/assets/images/product.jpg" />
</div>
<div class = "col-7 align-self-center">
<div class = "text-dark">Red T-Shirt</div>
<div class = "text-sm-left">$39.99 Per Pcs</div>
</div>
<div class = "col-2 align-self-center"><i class = "fas fa fa-times"></i></div>
</div>
</div>
<div class = "dropdown-divider"></div>
<div class = "container">
<div class = "row mt-4 mb-2">
<div class = "col-8 text-dark text-right"> Total
</div>
<div class = "col-4">
<div class = "text-right">$199</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-outline-secondary wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<i class = "fas fa fa-user"></i>
</button>
<div class = "dropdown-menu" style="width:280px;" aria-labelledby = "dropdownMenuButton">
<div class="container">
<div class="row my-3">
<div class="col-12 text-center">
<img width="100px" src="/assets/images/product.jpg" class="rounded-circle">
</div>
<div class="col-12 text-center mt-2">
<h5 class="mb-1">John Doe</h5>
<div>Frontend Developer</div>
</div>
</div>
</div>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-tachometer"></i>My
Dashboard</a>
<a class = "dropdown-item" href = "#"> <i class = "fas fa fa-user"></i>My Profile</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-cogs"></i>Settings</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-question"></i>Support</a>
<a class = "dropdown-item" href = "#"><i
class = "fas fa fa-info-circle"></i>Documentation</a>
<a class = "dropdown-item" href = "#"><i class = "fas fa fa-bug"></i>Report a Bug</a>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-outline-secondary wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<i class = "fas fa fa-sign-in"></i>
</button>
<div class = "dropdown-menu" style="width:280px;" aria-labelledby = "dropdownMenuButton">
<form class = "px-4 py-3">
<div class = "form-group">
<label for = "exampleDropdownFormEmail1">Email address</label>
<input type = "email" class = "form-control" id = "exampleDropdownFormEmail1"
placeholder = "email@example.com">
</div>
<div class = "form-group">
<label for = "exampleDropdownFormPassword1">Password</label>
<input type = "password" class = "form-control" id = "exampleDropdownFormPassword1"
placeholder = "Password">
</div>
<div class = "form-check wdpk-checkbox-wrapper">
<input type = "checkbox" class = "form-check-input wdpk-checkbox"
id = "dropdownCheck">
<label class = "form-check-label wdpk-checkbox-label" for = "dropdownCheck">
Remember me
</label>
<span class = "wdpk-checkmark"></span>
</div>
<button type = "submit" class = "btn btn-primary mt-2">Sign in</button>
</form>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">New around here? Sign up</a>
<a class = "dropdown-item" href = "#">Forgot password?</a>
</div>
</div>
</div>
<div class = "col-lg-3 mt-3 mb-5">
<div class = "dropdown wdpk-dropdown">
<button class = "btn btn-outline-secondary wdpk-button" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<i class = "fas fa fa-flag"></i>
</button>
<div class = "dropdown-menu" style = "width:300px;" aria-labelledby = "dropdownMenuButton">
<div class = "container">
<div class = "row">
<div class = "col-12 mt-2">
<h6> Notifications</h6>
<p class="mb-3">Below are the unread notifications </p>
</div>
<div class = "col-12 mb-2">
<div class = "row">
<div class = "col-2"><img style = "width: 30px;"
src = "/assets/images/product.jpg" />
</div>
<div class = "col-10 align-self-center">
<div class = "text-dark">You Purchased a T-Shirt</div>
</div>
</div>
</div>
<div class = "col-12 mb-2">
<div class = "row">
<div class = "col-2"><img style = "width: 30px;"
src = "/assets/images/product.jpg" />
</div>
<div class = "col-10 align-self-center">
<div class = "text-dark">You Purchased a T-Shirt</div>
</div>
</div>
</div>
<div class = "col-12 mb-2">
<div class = "row">
<div class = "col-2"><img style = "width: 30px;"
src = "/assets/images/product.jpg" />
</div>
<div class = "col-10 align-self-center">
<div class = "text-dark">You account has been created</div>
</div>
</div>
</div>
<div class = " col-12 dropdown-divider"></div>
<div class = "col-12" href = "#"><a href = "#">See All Notifications</a></div>
</div>
</div>
</div>
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
