WEB ATELIER (UDIT) · Learning by doing, with theory, practice and shared reflection

Bootstrap CSS: Interactivity & JavaScript — Dynamic User Experiences

By Rubén Vega Balbás, PhD 2025-09-10

URL: https://ruvebal.github.io/web-atelier-udit/lessons/en/bootstrap/interactivity-js-components/

📋 Table of Contents

Session Overview
🎯 Learning Objectives
🚀 Interactive Demos
📚 Core Concepts
🎭 Essential Interactive Components
💻 Hands-on Practice
- Exercise 1: Interactive Portfolio with Modals
🔧 JavaScript API and Programmatic Control
🤔 Critical Reflection Prompts
References & Further Reading

Bootstrap CSS: Interactivity & JavaScript — Dynamic User Experiences

Session Overview

This session introduces Bootstrap’s JavaScript components and interactivity features. Students will learn how to add dynamic behavior to their websites using Bootstrap’s pre-built JavaScript components, data attributes, and progressive enhancement principles.

🎯 Learning Objectives

Understand Bootstrap’s JavaScript component architecture
Learn to use data attributes for component configuration
Master interactive components like modals, carousels, and dropdowns
Apply progressive enhancement principles
Control components programmatically through JavaScript API

🚀 Interactive Demos

Explore these interactive demos to learn by doing:

Data Attributes System - Learn how Bootstrap uses data-* attributes
Modal Dialogs - Overlay dialog windows with all sizes and options
Carousels - Rotating slideshows with indicators and captions
Dropdowns & Tooltips - Menus and contextual hints
Interactive Portfolio - Complete example integrating all components
JavaScript API & Events - Programmatic control and event handling

📚 Core Concepts

Bootstrap’s JavaScript Architecture

Bootstrap’s JavaScript is built around a component-based architecture where:

Components are initialized using data attributes or JavaScript API
No custom JavaScript is required for basic functionality
Progressive enhancement ensures graceful degradation
Accessibility is built-in with proper ARIA attributes

💡 Learn more: Explore the Data Attributes Demo to see how they work in practice.

Data Attributes System

Bootstrap uses data attributes data-* to configure and control components without writing JavaScript:

🎨 Interactive Demo: Explore Data Attributes System

<!-- Basic button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch Modal</button>

<!-- Configurable component -->
<div class="dropdown">
	<button
		class="btn btn-secondary dropdown-toggle"
		type="button"
		data-bs-toggle="dropdown"
		data-bs-display="static"
		aria-expanded="false">
		Dropdown button
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
	</ul>
</div>

Progressive Enhancement

Bootstrap follows progressive enhancement principles:

HTML-first - Content works without JavaScript
CSS enhancement - Visual improvements with CSS
JavaScript enhancement - Interactive features with JS

🎭 Essential Interactive Components

Modals create dialog boxes that overlay the main content:

🎨 Interactive Demo: Explore Modal Dialogs - Different sizes, scroll, and positioning

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>

<!-- Modal structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p>Modal content goes here. This can include text, images, forms, or any other content.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

Modal Features:

Backdrop - Dark overlay behind the modal
Focus management - Automatically focuses on modal when opened
Keyboard navigation - Escape key closes modal
Scroll prevention - Body scroll is disabled when modal is open

Carousel/Slideshow

Carousels create rotating content displays:

🎨 Interactive Demo: Explore Carousels - With indicators, captions, and fade effects

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
	<div class="carousel-indicators">
		<button
			type="button"
			data-bs-target="#carouselExample"
			data-bs-slide-to="0"
			class="active"
			aria-current="true"
			aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
	</div>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="First slide" />
			<div class="carousel-caption d-none d-md-block">
				<h5>First slide label</h5>
				<p>Some representative placeholder content for the first slide.</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="Second slide" />
			<div class="carousel-caption d-none d-md-block">
				<h5>Second slide label</h5>
				<p>Some representative placeholder content for the second slide.</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="Third slide" />
			<div class="carousel-caption d-none d-md-block">
				<h5>Third slide label</h5>
				<p>Some representative placeholder content for the third slide.</p>
			</div>
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Previous</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>

Dropdowns create collapsible menus:

🎨 Interactive Demo: Explore Dropdowns & Tooltips - Directions, advanced content, and tooltips

<div class="dropdown">
	<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown button
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><hr class="dropdown-divider" /></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	</ul>
</div>

Tooltips and Popovers

Tooltips show additional information on hover/focus:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
	Tooltip
</button>

<!-- Initialize tooltips with JavaScript -->
<script>
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
		return new bootstrap.Tooltip(tooltipTriggerEl);
	});
</script>

💻 Hands-on Practice

Exercise 1: Interactive Portfolio with Modals

🎨 Complete Demo: View Interactive Portfolio

This demo shows how to combine all Bootstrap JavaScript components in a real application. It includes:

Responsive navigation with dropdowns

Project cards with detail modals

Testimonials carousel

Skill tooltips

Toast notification system

📝 Task: Examine the source code and customize the portfolio with your own information.

Features you should implement:

Sticky Navigation with mobile collapse
Project Cards with hover effects
Detail Modals with complete information
Technology Badges with tooltips
Contact Form in a modal

🔧 JavaScript API and Programmatic Control

Beyond data attributes, Bootstrap provides a complete JavaScript API for programmatic control:

🎨 Advanced Demo: Explore JavaScript API & Events

Manual Initialization

// Create component instance
const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
	backdrop: 'static',
	keyboard: false,
});

// Control the component
myModal.show();
myModal.hide();
myModal.toggle();

Component Events

const modalEl = document.getElementById('myModal');

// Listen to events
modalEl.addEventListener('show.bs.modal', function (event) {
	console.log('Modal is about to show');
	// Your code here
});

modalEl.addEventListener('shown.bs.modal', function (event) {
	console.log('Modal is fully visible');
	// Focus a field, start animation, etc.
});

Available Methods

All components share common methods:

Method	Description
`show()`	Shows the component
`hide()`	Hides the component
`toggle()`	Toggles between show/hide
`dispose()`	Destroys the component and cleans memory
`getInstance()`	Gets the component instance

🤔 Critical Reflection Prompts

Exploration

How did adding JavaScript interactivity change your perception of Bootstrap’s capabilities?
What surprised you most about the data attribute system for component configuration?
When would you prefer to use data attributes vs. JavaScript API?

Reflection

How does Bootstrap’s approach to JavaScript components embody progressive enhancement principles?
In what ways does no-code interactivity affect the developer experience compared to custom JavaScript?
What advantages does component lifecycle event handling provide?

Conceptualization

How do interactive components relate to user experience design principles?
What are the accessibility implications of modal dialogs and overlay content?
How does event timing influence application architecture?

Production

How might Bootstrap’s JavaScript components scale for complex, enterprise-level applications?
What are the performance implications of including Bootstrap’s JavaScript bundle?
When would you need to combine Bootstrap with frameworks like React or Vue?

Exhibition

How will you demonstrate the interactive features of your Bootstrap-enhanced portfolio?
What alternative approaches to web interactivity could achieve similar user experiences?
How would you document JavaScript component usage in your project?

Bootstrap CSS: Interactivity & JavaScript — Dynamic User Experiences

📋 Table of Contents

Bootstrap CSS: Interactivity & JavaScript — Dynamic User Experiences

Session Overview

🎯 Learning Objectives

🚀 Interactive Demos

📚 Core Concepts

Bootstrap’s JavaScript Architecture

Data Attributes System

Progressive Enhancement

🎭 Essential Interactive Components

Carousel/Slideshow

Tooltips and Popovers

💻 Hands-on Practice

Exercise 1: Interactive Portfolio with Modals

🔧 JavaScript API and Programmatic Control

Manual Initialization

Component Events

Available Methods

🤔 Critical Reflection Prompts

Exploration

Reflection

Conceptualization

Production

Exhibition

References & Further Reading

Official Documentation

JavaScript & Interactivity

User Experience & Interaction Design

📋 Table of Contents

Bootstrap CSS: Interactivity & JavaScript — Dynamic User Experiences

Session Overview

🎯 Learning Objectives

🚀 Interactive Demos

📚 Core Concepts

Bootstrap’s JavaScript Architecture

Data Attributes System

Progressive Enhancement

🎭 Essential Interactive Components

Modal Dialogs

Carousel/Slideshow

Dropdown Menus

Tooltips and Popovers

💻 Hands-on Practice

Exercise 1: Interactive Portfolio with Modals

🔧 JavaScript API and Programmatic Control

Manual Initialization

Component Events

Available Methods

🤔 Critical Reflection Prompts

Exploration

Reflection

Conceptualization

Production

Exhibition

References & Further Reading

Official Documentation

JavaScript & Interactivity

User Experience & Interaction Design