♦ BootStrap4 Dropdowns
♣ About BootStrap4 Dropdowns
DropDowns are used to represent data upon clicking or hovering or any other event in general.There exist various variants of Droppings such as DropUp, DropDown, DropLeft and DropDown.
♣ Example1: Basic Dropdown in BootStrap4
In this example, Basic DropDown is illustrated. Example
Input:
Output:
♣ Example2: Dropdown Link in BootStrap4
DropDown button can also be a link.In this example, Link DropDown Button is illustrated.
Example
Input:
Output:
♣ Example3: Colored Dropdowns in BootStrap4
In this example, Colored DropDowns are illustrated. Example
Input:
Output:
♣ Example4: Split Buttons in BootStrap4
DropDown can be made to happen when the down arrow part of the button is click.And the button can act as a normal link or a button with some other functionality.
This can be done by dropdown-toggle-split class in BootStrap4.
In this example, Split Buttons are illustrated.
Example
Input:
Output:
♣ Example5: Dropdown Size in BootStrap4
Custom Sized DropDown buttons can also be designed.In this example, Various sized DropDown buttons are illustrated.
Example
Input:
Output:
♣ Example6: DropUp Button in BootStrap4
DropUp is a variant in which the items of the menu show above of the button.In this example, normal and split DropUp buttons are illustrated.
Example
Input:
Output:
♣ Example7: DropRight Button in BootStrap4
DropRight is a variant in which the items of the menu show right of the button.In this example, normal and split DropRight buttons are illustrated.
Example
Input:
Output:
♣ Example8: DropLeft Button in BootStrap4
DropLeft is a variant in which the items of the menu show left of the button.In this example, normal and split DropLeft buttons are illustrated.
Example
Input:
Output: