Bootstrap 4 Dropdowns | Bootstrap 4 Dropdown Tutorial — DesignHub4u

In this tutorial, we will learn how to add Bootstrap 4 Dropdowns in our projects with various types. and how to use dropdowns in links, Navs, Buttons, and Navbar, etc. and also I will tell you all the tops and uses of dropdown menus. with lots of examples. If you have any kind of questions then you can ask me anytime. I will replay within 4 hours.

What are Bootstrap 4 Dropdowns

Basically, The dropdown is one type of toggle. which allows users to click on that and choose any one value from a predefined list. Here in bootstrap 4 we have best dropdowns with many different types and designs. we will see all the types of dropdowns in very deep and I will give you the best examples of that. wich will help you to understand dropdown very easily.

Bootstrap 4 Dropdowns are combinations of HTML, CSS, JavaScripts. You can also create dropdowns using only CSS. But here we will see combinations of all the languages. This will lightweight and easy to use in bootstrap 4.

Mostly we can see dropdowns in the navigation bars for showing submenus and also other contents. But there are no limitations on the use of bootstrap 4 dropdowns, You can use whatever you want. Let’s see all the dropdown types with easy examples.

1. Basic Dropdown

The basic dropdown is a simple dropdown of bootstrap 4. This is a normal and very simple dropdown with simple designs. Here you will see only a menu where you have to click and then this will show a simple dropdown.
If you want to use simple dropdown in your projects then you have to just add a.dropdown class in your main button or anchor tag. Then after you have to add submenus wich you want to open when clicking on Button. and there you have to use .dropdown-toggle class and the data-toggle="dropdown"attribute. This both will help dropdown to toggle dropdown.

Add the .dropdown-menu class to a element to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.

Example of Simple Dropdown of Bootstrap 4

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

2. Dropdown with Divider

We can add a divider in dropdowns if we want using .dropdown-divider class. This will help us to add a divider in the dropdown. This will be used to separate links inside the dropdown menu with a thin horizontal line. Let's see the example of the dropdown divider.

Example Dropdown Divider

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

3. Dropdown with Header

In this case Bootstrap provides a dropdown with the header section this will show a dropdown with the separated header. You can add header using
.dropdown-header class in the menu or sub header. Let's see the example of Dropdown Header.

Example of Dropdown with Header

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

4. Dropdown with Disable and Active

Disabled and Active items also support in Bootstrap 4 Dropdowns. When you disable any menu then this will be disabled and you can click on this menu. If you want to use the disabled menu then you have to add an only .disabled class in your sub-menu. This will work.

Active items also support in Bootstrap 4. When you use .active class in your sub-menu then this will be active and this will show as active menu. Let's see the example of Disabled and Active classes.

Disable and Active Dropdown Example

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

5. Bootstrap 4 Dropdowns Position

You can set position of dropdown as per your need like left, right. Like if you want your menu to the right side then you will have to use.dropright class. using this class your dropdown will go on the right side.

And If you want your menu on the left side then the same as drop right you have to use a .dropleft class. and your dropdown goes on the left side.

Also you can drop up the menu using .dropdup class. let's see the example.

Example of Dropdown positions

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

We have some other examples for different types of Bootstrap 4 Dropdowns Let’s See the Examples.

6. Dropdown with simple Text

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

7. Grouped Buttons with a Dropdown

EXAMPLE IS NOT SHOWING HERE PLEASE GO TO PUBLICER SITE

8. Split Button Dropdowns in Bootstrap 4

In this example, you will see split buttons dropdowns with separated colors.

Read Also

1. Introduction of Bootstrap 4

2. What is the difference between Bootstrap 3 and Bootstrap 4?

3. Advantages of Using Bootstrap 4

4. Online or Offline? How should you use bootstrap 4 Online or Offline? Why?

5. Bootstrap 4 Grid System with Separated Examples

6. Bootstrap 4 Tables with structured and easy examples

7. Bootstrap 4 Buttons with structured and easy examples

8. Bootstrap 4 Cards with structured and easy examples

9. Bootstrap 4 Dropdowns with structured and easy examples

** Conclusion **

I hope you have understood all the examples of bootstrap dropdowns. If have you any questions then you can ask me at any time. I will replay to you within 2 to 4 hours. Ask your questions in the comment box.

Originally published at https://www.designhub4u.com on November 26, 2019.