Bootstrap Makers/Tools
|
Buttons
|
Tables
|
Modal
|
Carousel
|
Dropdown
|
Accordion
|
Badges
|
Other Tools
Popovers
Breadcrumbs
Progress
Alerts
Tooltips
Spinner
Pagination
Range
Floating Labels
Text Styles
Link Maker
|
About
Bootstrap 5 Dropdown Maker Tool
Basic Dropdown Settings
Dropdown Type
Single Button
Split Button
Size
Small
Default
Large
Direction
Drop Down
Drop Up
Drop Left
Drop Right
Alignment
Left (Default)
Right
Button Text
Button Color
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Button
Rounded Button
Button Icon
Select Icon
Caret Down
Chevron Down
Bars
Gear
User
List
Ellipsis Vertical
Menu Settings
Menu Background Color
Default (White)
Dark
Menu Width
Default
200px
250px
300px
Full width
Menu Border Radius
None
Small
Medium
Large
Menu Shadow
Menu Border
Add Dividers
Add Headers
Open on Hover
Dropdown Items
Item Text
Add Link
Link URL
Add Icon
Select Icon
Check
Star
User
Cog
Home
Trash
Edit
Active
Disabled
Remove
Add Item
Custom Classes
Live Preview
Generated Code
HTML
JavaScript
Copy
How to use Dropdown tool
Setting the Basic options:
On left bar, set the basic options including Single button or Split, Size, Direction, Color etc.
Turn On/Off the settings for Outline and Rounded button dropdown.
Setting the Icon:
You may set the Icon by pressing the "Button Icon" option. Select the Icon from the dropdown from the available list.
Menu Settings:
Dropdown menu setting including Color, Width, Border Radius can be set there.
On/Off Menu settings:
Turn On/Off the Shadow, Border, Dividers between items, Header, and open on Hover
Hover State:
If you opt for Hover, The JavaScript is generated in the "Generated Code" section (required for hover to work)
How do I copy the code?
Click the "Copy" button to take the CSS and/or JavaScript (Separately).