Next ❯

Bootstrap Components

  • Overview of Bootstrap UI components used in modern web development.

  • Introduction to Bootstrap Components

    After mastering the grid system and layout mechanics, the next major step in Bootstrap is understanding components.

    In Bootstrap, components are pre-built UI elements that solve common interface problems.

    Components allow developers to:

    • Build interfaces faster

    • Maintain visual consistency

    • Avoid rewriting common UI patterns

    • Focus on functionality instead of styling

    Almost every real-world Bootstrap project heavily depends on components.

    What Are Bootstrap Components ?

    Definition

    Bootstrap components are ready-made, reusable UI building blocks created using:

    • HTML structure

    • Bootstrap CSS classes

    • Optional JavaScript behavior

    They represent common interface elements that users already understand.

    Examples include:

    • Buttons

    • Navigation bars

    • Cards

    • Forms

    • Alerts

    • Modals

    Each component follows Bootstrap’s:

    • Design system

    • Accessibility guidelines

    • Responsive behavior

  • Why Components Exist

    Without components, developers would need to:

    • Design UI elements from scratch

    • Handle cross-browser styling

    • Implement accessibility manually

    • Recreate the same elements repeatedly

    Bootstrap components eliminate this repetition by providing tested, standardized solutions.

    Key Characteristics of Bootstrap Components

    Bootstrap components share some important characteristics:

    1. Reusability :
      Components can be used multiple times across pages.

    2. Consistency :
      All components follow the same design language.

    3. Responsiveness :
      Components adapt naturally to different screen sizes.

    4. Accessibility :
      Many components include ARIA roles and keyboard support.

    Customizability :
    Components can be styled using utilities, overrides, or variables.

    How Bootstrap Components Work

    Bootstrap components generally consist of:

    1. HTML markup

    2. Bootstrap CSS classes

    3. Optional JavaScript (for interactive components)

    Some components are CSS-only, while others require JavaScript to function fully.

    Example concept:

    • Button → CSS-only

    • Modal → CSS + JavaScript

    Understanding this distinction is important when deciding which files to include in a project.

    Overview of Bootstrap Component Categories

    Bootstrap groups components into logical categories based on their purpose.
    This organization makes the framework easier to learn and use.

    Component Categories in Bootstrap

    Layout & Content Components

    These components help structure and present content.

    Examples:

    • Containers

    • Cards

    • List groups

    • Tables

    • Images

    • Figures

    Purpose:

    • Organize information

    • Improve readability

    • Present structured data

    These components are often combined with the grid system.

  • Layout & Content Components

    What are Layout & Content Components ?

    These components are used to structure, organize, and present content clearly.
    They do not handle navigation or interaction, only presentation.

Layout & Content Components – Containers

Containers wrap content and keep it properly aligned, centered, and responsive within the layout. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <p class="bg-light p-3 text-center">
      This content is centered and padded.
    </p>
  </div>

</body>
</html>

  • Purpose:

    • Defines layout boundaries

    • Works with grid system

Bootstrap Card Component

Cards group related content like titles, text, and buttons into a clean, visually structured box. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick content.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>

</body>
</html>

  • Purpose:

    • Group information

    • Improve readability

Bootstrap List Group Component

List groups display related items in a clean, structured list format with consistent styling. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Group Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <ul class="list-group" style="max-width: 400px;">
      <li class="list-group-item">Item One</li>
      <li class="list-group-item">Item Two</li>
      <li class="list-group-item">Item Three</li>
    </ul>
  </div>

</body>
</html>

  • Purpose:

    • Display structured lists

    • Often used in sidebars and menus

Bootstrap Table Component

Bootstrap tables provide clean styling for tabular data with optional borders, stripes, and header styling. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <table class="table table-bordered table-striped">
      <thead class="table-dark">
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>25</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

  • Purpose:

    • Present structured data

    • Readable and responsive

Responsive Images in Bootstrap (.img-fluid)

.img-fluid makes the image responsive by setting max-width: 100% and height: auto, so it scales properly within its container. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5 text-center">
    <img src="https://via.placeholder.com/600x300" 
         class="img-fluid rounded" 
         alt="Responsive image">
  </div>

</body>
</html>

  • Purpose:

    • Responsive images

    • Prevent overflow

    Navigation Components

    What are Navigation Components ?

    They help users move through pages and sections.

Bootstrap Navbar Component

The Bootstrap navbar provides a clean and responsive header used for branding and navigation across pages. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <nav class="navbar navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">MySite</a>
    </div>
  </nav>

</body>
</html>

  • Purpose:

    • Main site navigation

    • Branding + links

Bootstrap Nav Component

Bootstrap navs create structured navigation menus with styled links for switching between sections or pages. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nav Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>

</body>
</html>

  • Purpose:

    • Simple navigation lists

Bootstrap Tabs Component

Bootstrap tabs allow switching between different content sections without reloading the page. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabs Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">

    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">
          Tab 1
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">
          Tab 2
        </button>
      </li>
    </ul>

    <div class="tab-content p-3 border border-top-0">
      <div class="tab-pane fade show active" id="tab1">
        Content for Tab 1
      </div>
      <div class="tab-pane fade" id="tab2">
        Content for Tab 2
      </div>
    </div>

  </div>

</body>
</html>

  • Purpose:

    • Switch content sections

Bootstrap Pills Navigation

Bootstrap pills provide a rounded navigation style used for switching between sections or highlighting active links. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nav Pills Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Pill 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pill 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pill 3</a>
      </li>
    </ul>
  </div>

</body>
</html>

  • Purpose:

    • Alternative to tabs

    • Softer UI

Bootstrap Breadcrumb Component

Breadcrumbs show the current page’s location within a hierarchy and help users navigate back to previous sections. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breadcrumb Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          Page
        </li>
      </ol>
    </nav>
  </div>

</body>
</html>

  • Purpose:

    • Show page hierarchy

Bootstrap Pagination Component

Pagination creates page navigation links, allowing users to move between multiple pages of content. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">3</a>
        </li>
      </ul>
    </nav>
  </div>

</body>
</html>

  • Purpose:

    • Navigate large datasets

  • Form Components

    What are Form Components ?

    Used to collect user input in a structured and accessible way.

Bootstrap Input Field (.form-control)

.form-control styles input fields with proper width, padding, and responsive behavior for clean form design. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Field Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5" style="max-width: 400px;">
    <input 
      type="text" 
      class="form-control" 
      placeholder="Enter name">
  </div>

</body>
</html>
  • Input fields are used to collect user data such as names, emails, and passwords.In Bootstrap, the .form-control class styles inputs with proper spacing, width, and responsiveness.It ensures a clean and consistent form design across all devices.

Bootstrap Textarea (.form-control)

A textarea allows multi-line input, and .form-control styles it for proper spacing and responsive design. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5" style="max-width: 500px;">
    <div class="mb-3">
      <label class="form-label">Message</label>
      <textarea 
        class="form-control" 
        rows="4" 
        placeholder="Enter your message">
      </textarea>
    </div>
  </div>

</body>
</html>

  • Textarea is used for multi-line user input like messages or comments.In Bootstrap, the .form-control class provides consistent styling, spacing, and responsiveness.It automatically adjusts to the container width for clean form design.


Bootstrap Select Menu (.form-select)

.form-select styles dropdown menus with proper spacing and responsive design for clean form layouts. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Menu Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5" style="max-width: 400px;">
    <div class="mb-3">
      <label class="form-label">Choose an option</label>
      <select class="form-select">
        <option selected>Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
  </div>

</body>
</html>
  • A select menu allows users to choose one option from a dropdown list.In Bootstrap, the .form-select class styles the dropdown with consistent spacing and responsive design.It ensures a clean and user-friendly form interface.

Bootstrap Checkbox & Radio Button

Checkbox allows multiple selections, while radio allows only one option to be selected. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkbox & Radio Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">

    <!-- Checkbox -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check1">
      <label class="form-check-label" for="check1">
        Accept Terms
      </label>
    </div>

    <!-- Radio Button -->
    <div class="form-check mt-3">
      <input class="form-check-input" type="radio" name="gender" id="radio1">
      <label class="form-check-label" for="radio1">
        Select Option
      </label>
    </div>

  </div>

</body>
</html>
  • Checkboxes allow multiple selections, while radio buttons allow only one selection from a group. Bootstrap’s .form-check-input provides consistent styling and alignment for these input controls.

Bootstrap Validation Message (.invalid-feedback)

.invalid-feedback displays an error message when a form field is invalid. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Validation Message Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5" style="max-width: 400px;">
    <input type="text" class="form-control is-invalid" placeholder="Enter name">
    <div class="invalid-feedback">
      This field is required.
    </div>
  </div>

</body>
</html>

  • Validation messages inform users when a form input is incorrect or missing.In Bootstrap, .invalid-feedback shows error text when an input has the is-invalid class.It improves form usability and user guidance.

    Purpose of Forms:

    • Data collection

    • Accessibility

    • Clear feedback

  • Feedback Components

    What are Feedback Components ?

    They communicate system status and responses to users.

Bootstrap Alert Component

Alerts display important messages like success, warning, or error notifications to users. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="alert alert-success" role="alert">
      Action successful!
    </div>
  </div>

</body>
</html>
  • Alerts are used to display important messages like success, warning, or error notifications.Bootstrap provides contextual classes like alert-success, alert-danger, etc., for different message types.

Bootstrap Badge Component

Badges are small labels used to highlight new items, counts, or status indicators. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Badge Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <h4>
      Notifications 
      <span class="badge bg-primary">New</span>
    </h4>
  </div>

</body>
</html>
  • Badges are small count or status indicators used to highlight new items, notifications, or updates.In Bootstrap, they are styled using classes like badge and contextual colors such as bg-primary.

Bootstrap Toast Component

Toasts are lightweight notification messages used to show temporary updates or alerts. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">
    <div class="toast show">
      <div class="toast-body">
        Message sent
      </div>
    </div>
  </div>

</body>
</html>
  • Toasts are small, temporary notification messages that appear briefly on the screen.They are used to inform users about actions like successful submissions or updates without interrupting the workflow.

Bootstrap Progress Bar & Spinner

Progress bars show task completion percentage, while spinners indicate loading or ongoing processes. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress & Spinner Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">

    <!-- Progress Bar -->
    <div class="progress mb-4">
      <div class="progress-bar bg-success" style="width: 50%">
        50%
      </div>
    </div>

    <!-- Spinner -->
    <div class="spinner-border text-primary" role="status">
    </div>

  </div>

</body>
</html>

  • A progress bar visually shows the completion level of a task.Spinners indicate loading or processing states to inform users that something is happening in the background.

    Purpose:

    • Inform users

    • Build trust

    • Show loading/progress

      Interactive Components 

      What are Interactive Components ? 

      They require Bootstrap JavaScript to function.

    Bootstrap Modal Component

    A modal is a popup window used to display important content or actions without leaving the current page. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">

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

    <!-- Modal -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content p-4">
          Modal content
        </div>
      </div>
    </div>

  </div>

</body>
</html>
    • A modal is a popup window that appears over the page to display important content or actions.It requires Bootstrap’s JavaScript to handle opening and closing behavior.

    Bootstrap Dropdown & Collapse Components

    Dropdown displays a list of options when clicked, while Collapse shows or hides content dynamically. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown & Collapse Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">

    <!-- Dropdown -->
    <div class="dropdown mb-4">
      <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        Menu
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Item 1</a></li>
        <li><a class="dropdown-item" href="#">Item 2</a></li>
      </ul>
    </div>

    <!-- Collapse -->
    <button class="btn btn-success mb-2" 
            data-bs-toggle="collapse" 
            data-bs-target="#box">
      Toggle
    </button>

    <div id="box" class="collapse">
      <div class="card card-body">
        Hidden content
      </div>
    </div>

  </div>

</body>
</html>
    • A dropdown displays a list of options when triggered by a button or link.Collapse is used to show or hide content dynamically, helping create expandable sections and cleaner layouts.

    Bootstrap Accordion Component

    An accordion is a collapsible content component that allows users to expand and hide sections one at a time. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">

    <div class="accordion" id="myAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" 
                  type="button" 
                  data-bs-toggle="collapse" 
                  data-bs-target="#collapseOne">
            Accordion Title
          </button>
        </h2>
        <div id="collapseOne" 
             class="accordion-collapse collapse show" 
             data-bs-parent="#myAccordion">
          <div class="accordion-body">
            Content
          </div>
        </div>
      </div>
    </div>

  </div>

</body>
</html>
    • An accordion is a collapsible component used to organize content into expandable sections. It allows users to show and hide information, keeping the interface clean and structured.

    Bootstrap Carousel Component

    A carousel is a slideshow component used to display images or content slides that rotate automatically or manually. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <div class="container mt-5">

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <div class="carousel-item active bg-primary text-white p-5 text-center">
          Slide 1
        </div>

        <div class="carousel-item bg-success text-white p-5 text-center">
          Slide 2
        </div>

      </div>

      <!-- Controls -->
      <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>

      <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>

    </div>

  </div>

</body>
</html>
    • A carousel is a slideshow component used to display multiple items like images or content slides in rotation. It helps showcase featured content in a dynamic and interactive way.
    • Utility-Based Helper Components

    Close Button, Placeholder & Ratio Helper

    btn-close creates a simple close icon button, placeholder shows loading skeleton content, and ratio maintains responsive aspect ratios like 16:9 for videos or embeds. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Utility Components</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">

    <!-- Close Button -->
    <button class="btn-close mb-4"></button>

    <!-- Placeholder -->
    <div class="mb-4">
      <span class="placeholder col-6"></span>
    </div>

    <!-- Ratio Helper -->
    <div class="ratio ratio-16x9">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
              title="Video" 
              allowfullscreen>
      </iframe>
    </div>

  </div>

</body>
</html>

    • The Close Button (.btn-close) provides a simple dismiss icon for modals and alerts.Placeholders create loading skeleton effects before real content appears.The Ratio helper maintains fixed aspect ratios (like 16:9) for responsive embeds such as videos.

      Purpose:

      • Support other components

      • Reduce custom CSS

      Choosing the Right Component

      Correct choice depends on:

      • Purpose (not looks)

      • Accessibility

      • Content type

      • Interaction need

      Correct usage improves:

      • Maintainability

      • Usability

      • Code clarity

      Common Mistakes

      • Using components randomly

      • Mixing multiple components unnecessarily

      • Forgetting JavaScript for interactive components

      • Over-customizing early

      • Using components instead of grid for layout

      Components in the Bootstrap Learning Path

      1. Grid → structure

      2. Utilities → spacing & alignment

      3. Components → UI & functionality

      4. Customization → branding

      Components are what users see and interact with.

    Next ❯