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

  • read
  • Add to Flipboard Magazine.

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: Jacob Lett - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Common Questions
Tags:

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

The Artistic Side of web design 1

Advertise Here