Bootstrap → Lesson 3.4 — Interactive Components (Modal, Accordion/Collapse, Tooltips)

About Us
Courses
Getting started

Home

See what fits your budget

Become an Instructor

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More
Blog

Home
Courses
Blog
Getting started

Home

See what fits your budget

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More

Lesson 3.4 — Interactive Components (Modal, Accordion/Collapse, Tooltips)

Lesson overview
Bootstrap interactive components rely on the JS bundle. You trigger behavior using data attributes (data-bs-toggle, data-bs-target) and a required structure. You’ll learn patterns for modals, accordions, and tooltips.

Learning outcomes

Create a modal and open it via a button
Build an accordion using collapse
Enable tooltips properly

Modal example

Open modal

</button>

<h5 class=“modal-title“>Modal title</h5>

</div>

<div class=“modal-body“>Hello from the modal.</div>

<button class=“btn btn-secondary“ data-bs-dismiss=“modal“>Close</button>

</div>

Accordion example

Question 1

</button>

</h2>

<div class=“accordion-body“>Answer content.</div>

</div>

Tooltips (requires initialization)

Hover me

</button>

const tooltipTriggerList = document.querySelectorAll(‘[data-bs-toggle=”tooltip”]‘);

tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));

</script>

Practice tasks

Create a modal “Delete confirmation” with Cancel/Delete buttons.
Build an accordion with 3 items, only one open at a time.

Quick check

Why do tooltips need a JS initialization snippet?
What does data-bs-dismiss="modal" do?

Lesson summary

Interactive components combine proper markup with Bootstrap JS behaviors.

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

About us

Blog posts

Bootstrap

Curriculum

Lesson 3.4 — Interactive Components (Modal, Accordion/Collapse, Tooltips)

Leave a Reply Cancel reply

Explore courses

About us

Blog posts

Subscribe

Modal title