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

  • Updated on
  • 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.

Want to save time using Bootstrap?

Bootstrap 4 Book
& Starter Templates

Learn by building a CMS admin dashboard and marketing homepage step by step.

Learn More

Written by: Jacob Lett
Category: Common Questions
Tags:

Leave a comment

Related Posts

Blog Home

Categories

Topics