❮ Previous Next ❯

Interactive Components

Create dynamic interfaces using Bootstrap interactive components.

Introduction to Interactive Components
Interactive components are UI elements that respond to user actions such as:
- Clicking
- Hovering
- Toggling
- Expanding or collapsing content
In Bootstrap, interactive components rely on:
- HTML structure
- Bootstrap CSS classes
- Bootstrap JavaScript
Without Bootstrap JavaScript, these components will not work.
Modals
What Is a Modal ?
A Modal is a dialog box that appears on top of the current page and blocks interaction with the background until it is closed.
In Bootstrap, modals are used to show important, focused content without navigating away from the current page.
Common Use Cases
- Login / Signup forms
- Confirmation dialogs
- Alerts with actions
- Popups
- Important system messages
Why Modals Are Important
Modals are important because they:
- Focus user attention on one task
- Prevent accidental interaction with background content
- Reduce unnecessary page navigation
- Improve user experience for critical actions
Modals should always be used sparingly and intentionally.
Basic Modal Structure
A Bootstrap modal is made up of three main layers:
1. Modal Wrapper – controls visibility and backdrop
2. Modal Dialog – controls size and position
3. Modal Content – actual visible box
Inside modal content, we usually have:
- Header
- Body
- Footer

Creating a Basic Modal Component

A Bootstrap modal is a popup component with wrapper, dialog, and content sections, usually containing a header, body, and footer.

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

This button:
- Uses data-bs-toggle="modal" to activate modal behavior
- Uses data-bs-target to link to a specific modal

Building the Complete Structure of a Bootstrap Modal

The modal structure includes wrapper, dialog, and content sections with header, body, and footer for displaying popup content.

<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is modal content.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Understanding the Modal Code

Part	Purpose
data-bs-toggle="modal"	Activates modal
data-bs-target="#myModal"	Links button to modal
.modal	Main wrapper
.modal-dialog	Controls size & position
.modal-content	Visible modal box
.btn-close	Close icon
data-bs-dismiss="modal"	Closes modal

Modal Sizes

Bootstrap provides predefined modal sizes.

Changing Modal Size

Bootstrap provides .modal-sm and .modal-lg classes to adjust the modal size.

<!-- Small Modal -->
<div class="modal-dialog modal-sm"></div>

<!-- Large Modal -->
<div class="modal-dialog modal-lg"></div>

Use Cases
- Small → confirmations, alerts
- Large → forms, detailed content
Centered Modal

Vertically Centering a Modal

The .modal-dialog-centered class centers the modal vertically on the screen.

<div class="modal-dialog modal-dialog-centered"></div>

This is useful for:
- Login dialogs
- Confirmation popups
Modal Best Practices
- Use modals only for important interactions
- Keep content concise
- Always provide a close option
- Avoid opening modals automatically
- Never nest modals inside other modals
Dropdowns
What Is a Dropdown ?
A Dropdown is a toggleable menu that displays a list of options when clicked.
Dropdowns are used for:
- Menus
- Action lists
- Settings
- Profile options
- Compact navigation
Why Dropdowns Are Useful
Dropdowns help because they:
- Save screen space
- Group related actions
- Keep UI clean
- Improve usability
They are ideal for secondary actions.
Basic Dropdown Structure
A dropdown consists of:
1. Toggle button
2. Dropdown menu
3. Dropdown items

Creating a Basic Dropdown Menu

The .dropdown component creates a toggle button with a list of selectable menu items.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </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><a class="dropdown-item" href="#">Something else</a></li>
  </ul>
</div>

Understanding the Dropdown Code
Class / Attribute Purpose
.dropdown-toggle Creates toggle button
.data-bs-toggle="dropdown" Activates dropdown
.dropdown-menu Menu container
.dropdown-item Clickable item

Adding Headers and Dividers in a Dropdown Menu

The .dropdown-header adds a title inside the menu, and .dropdown-divider separates items with a horizontal line.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Options</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><a class="dropdown-item" href="#">Settings</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Logout</a></li>
</ul>

This improves:
- Organization
- Readability
- Visual separation

Aligning a Dropdown Menu to the Right

The .dropdown-menu-end class aligns the dropdown menu to the right side of the button.

<ul class="dropdown-menu dropdown-menu-end"></ul>

Commonly used:
- In navbars
- Profile menus

Integrating a Dropdown Menu Inside a Navbar

The .dropdown classes can be used inside a navbar to create expandable menu items.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
    Menu
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
  </ul>
</li>

Used for:
- Account menus
- Settings
- Navigation shortcuts
Dropdown Best Practices
- Keep option count limited
- Use clear, meaningful labels
- Avoid deep nesting
- Ensure mobile usability
- Do not overload dropdowns
Feature Modal Dropdown
Purpose Focused interaction Quick selection
Screen blocking Yes No
Use case Forms, confirmations Menus, options
Complexity Higher Lower
Always choose based on user intent, not visual preference.
Common Mistakes
- Forgetting to include Bootstrap JavaScript
- Using modals for simple messages
- Overusing dropdowns
- Nesting dropdowns incorrectly
- Ignoring accessibility
Interactive components must be used responsibly.

❮ Previous Next ❯

Class / Attribute	Purpose
.dropdown-toggle	Creates toggle button
.data-bs-toggle="dropdown"	Activates dropdown
.dropdown-menu	Menu container
.dropdown-item	Clickable item

Feature	Modal	Dropdown
Purpose	Focused interaction	Quick selection
Screen blocking	Yes	No
Use case	Forms, confirmations	Menus, options
Complexity	Higher	Lower

Introduction to Interactive Components

Modals

What Is a Modal ?

Common Use Cases

Why Modals Are Important

Basic Modal Structure

Creating a Basic Modal Component

Building the Complete Structure of a Bootstrap Modal

Modal Sizes

Changing Modal Size

Use Cases

Centered Modal

Vertically Centering a Modal

Modal Best Practices

Dropdowns

What Is a Dropdown ?

Why Dropdowns Are Useful

Basic Dropdown Structure

Creating a Basic Dropdown Menu

Adding Headers and Dividers in a Dropdown Menu

Aligning a Dropdown Menu to the Right

Integrating a Dropdown Menu Inside a Navbar

Dropdown Best Practices

Login

Create Account