What does Bootstrap 4 data-toggle=”dropdown” do?

Have you ever noticed data-toggle="dropdown" in Bootstrap 4 dropdown code sections and wondered what this does?

Bootstrap includes a CSS stylesheet and JS full of functions to add click behaviors and interactivity. Instead of having you write custom javascript to initialize these functions, it searches the page for any elements that contain certain data attributes. In this case it looks for anything with data-toggle="dropdown".

When it finds this, it runs javascript to show the dropdown on just this element. Below is a code example of how this works.

See the Pen what is Bootstrap 4 data-toggle? by Jacob Lett (@JacobLett) on CodePen.

Summary

In a lot of cases Bootstrap 4 saves you time from not having to write redundant CSS and JavaScript init functions. Using data attributes makes Bootstrap JS work a lot like CSS in how it finds elements to style or add interactivity for.



Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Tags: , ,