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.

Bootstrap 4 books - learn responsive web design for beginners

The Bootstrap 4 Quick Start

Learn More

Advertise Here

Written by: Jacob Lett - Jacob is an experienced website designer and developer who specializes in building HubSpot CMS themes. He helps Industrial companies optimize and leverage their website for awareness, lead generation, and branding.
Category: Common Questions
Tags:

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here