Introduction

What it is: Bootstrap 5 is a front-end framework. It gives you pre-made CSS and some JavaScript components.

Why it is used: Imagine you must build a landing page today. Bootstrap helps you create a nice layout and readable text quickly, even if you are new to design.

Step by step

• Bootstrap works mainly by adding classes to HTML.
• Many classes are utilities, like spacing (margin/padding) and colors.
• Some features need Bootstrap JavaScript (like modals). You will learn those later.

Code example 1: Two different text styles

Bootstrap has helpful typography classes you can add right away.

<p class="lead">This is lead text. It is bigger and easier to notice.</p><p class="text-muted">This is muted text. It looks softer.</p>

Code example 2: A button with Bootstrap classes

Buttons are styled using btn and a color class.

<button type="button" class="btn btn-primary">Save</button><button type="button" class="btn btn-outline-secondary">Cancel</button>

Common mistakes

• Using old Bootstrap 4 classes that changed in Bootstrap 5.
• Adding custom CSS too early and getting confused about what Bootstrap is doing.
• Expecting every component to work without including Bootstrap JS when needed.

Tips / best practices

• Learn utilities first (spacing, colors, display). They solve many problems.
• Read class names like a sentence: mt-3 means margin-top 3.
• Build small pieces, then combine them into a full page.

Basics

What it is: Basics means learning how to use Bootstrap classes in your HTML. You will practice a few key patterns: containers, spacing, and simple alignment.

Why it is used: In real life, you often need consistent spacing so pages look clean. Bootstrap spacing utilities help you do that without writing CSS.

Step by step

• Wrap content in a container so it has nice side space.
• Use margin classes like mt-3 and padding classes like p-3.
• Use text alignment classes like text-center when needed.

Code example 1: Container with spacing

<div class="container"><h2 class="mt-4 mb-3">Welcome</h2><p class="mb-4">This paragraph has bottom margin.</p><div class="p-3 bg-body-secondary">This box has padding.</div></div>

Code example 2: Centering text

Use text-center to center text inside an element.

<div class="container"><h3 class="text-center mt-4">Centered title</h3><p class="text-center">Centered paragraph.</p></div>

Common mistakes

• Mixing up m (margin) and p (padding).
• Using text-center to center a block element itself (it only centers text, not the element).
• Putting content directly in body with no container, then wondering why it touches the edges.

Tips / best practices

• Use consistent spacing values across the page (for example, many mb-3).
• Start with utilities first. Add custom CSS only when you cannot do it with classes.
• Test your page width by resizing the browser to see how it feels.

Containers

What it is: A container is a wrapper that holds your content and controls the page width.

Why it is used: On a big monitor, text can become too wide and hard to read. A container keeps your layout comfortable, like a centered article on a blog.

Step-by-step

• Start with an HTML page that already loads Bootstrap CSS.
• Add a div with container to center content with a max width.
• Use container-fluid when you want full-width content.
• Use responsive containers (like container-md) to switch to fixed width only after a breakpoint.

Code example 1: Fixed container

<div class="container"><h1>My page</h1><p>This text stays readable on large screens.</p></div>

Code example 2: Fluid container

<div class="container-fluid"><h1>Full width banner</h1><p>This stretches from left to right.</p></div>

Common mistakes

• Putting .row directly in the body without a container. This often causes awkward spacing.
• Using container-fluid everywhere, then wondering why text looks too wide on desktops.

Tips / best practices

• Use container for most pages. It is the safest default.
• Use container-fluid only for sections that should span the full screen, like hero headers.
• Keep containers consistent so your layout feels aligned across pages.

Grid

What it is: The grid is Bootstrap’s system for making columns that line up and resize on different screen sizes.

Why it is used: A product page might show 3 items per row on desktop, but only 1 per row on a phone. The grid makes this easy.

Step-by-step

• Place a .row inside a container.
• Inside the row, place one or more .col elements.
• Use sizes like col-6 to control how much space a column takes (out of 12).
• Use breakpoints like col-md-4 to change layout at specific screen widths.

Code example 1: Two equal columns

<div class="container"><div class="row"><div class="col">Left</div><div class="col">Right</div></div></div>

Code example 2: Responsive cards row

<div class="container"><div class="row"><div class="col-12 col-md-4">Item 1</div><div class="col-12 col-md-4">Item 2</div><div class="col-12 col-md-4">Item 3</div></div></div>

Common mistakes

• Forgetting the .row wrapper. Columns need a row to work correctly.
• Making columns add up to more than 12 (like three col-6). This causes wrapping you did not expect.
• Putting padding classes on .row and then getting weird horizontal overflow. Rows already use negative margins.

Tips / best practices

• Start with col-12 for mobile, then add col-md-* for larger screens.
• Use g-* classes (like g-3) to control spacing between columns.
• Keep layouts simple first, then refine sizes after your content looks correct.

Typography

What it is: Typography in Bootstrap means ready-made styles for headings, paragraphs, and text helpers.

Why it is used: In real projects, you want text to look consistent across pages, like matching headings in a documentation site.

Step-by-step

• Use normal HTML headings (h1 to h6). Bootstrap styles them nicely by default.
• Use helper classes like lead for an intro paragraph.
• Use alignment helpers like text-center to align text.
• Use emphasis helpers like fw-bold for bold text.

Code example 1: Headings and lead

<div class="container"><h1>Welcome</h1><p class="lead">This is a simple intro line.</p><p>This is normal paragraph text.</p></div>

Code example 2: Alignment and weight

<p class="text-center fw-bold">Centered bold text</p><p class="text-end text-muted">Right aligned muted note</p>

Common mistakes

• Using headings only for size. Headings should describe structure, not just look big.
• Overusing fw-bold and text-uppercase. Too much emphasis reduces readability.
• Mixing custom CSS font sizes everywhere, which makes the site inconsistent.

Tips / best practices

• Use one main h1 per page, then go down in order.
• Prefer Bootstrap helpers for quick changes, and use custom CSS only when you truly need it.
• Keep text readable: short lines, clear spacing, and consistent hierarchy.

Buttons

What it is: Buttons are clickable UI elements. In Bootstrap 5, you create them by adding button classes to a <button> or <a> element.

Why it is used (real-life example): On a checkout page, you need a clear "Pay now" button so users know what to click next.

Step-by-step

• Start with a normal <button>.
• Add btn to turn it into a Bootstrap button.
• Add a style class like btn-primary to choose a color.
• Optionally add size classes like btn-sm or btn-lg.

Code example 1: basic button

<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary">Cancel</button>

Here, btn gives button styling, and btn-primary chooses the main theme color.

Code example 2: link button and sizes

<a href="#pricing" class="btn btn-outline-success btn-lg">View pricing</a>
<button type="button" class="btn btn-danger btn-sm">Delete</button>

An <a> can look like a button. btn-outline-success makes an outline style, and btn-lg makes it bigger.

Common mistakes

• Forgetting the base class btn (the style will not work correctly).
• Using a link that looks like a button but forgetting a real href (it may not be accessible).
• Putting a button inside a form without setting type (it may submit by accident).

Tips / best practices

• Use type="button" for buttons that should not submit a form.
• Use clear text like "Save" or "Continue" instead of vague text like "OK".
• Keep one primary action per area (too many btn-primary buttons can confuse users).

Colors

What it is: Bootstrap 5 provides color utility classes for text, backgrounds, and links. These classes help you apply consistent colors quickly.

Why it is used (real-life example): In a dashboard, you may want green for success messages and red for errors so users understand the meaning fast.

Step-by-step

• Pick what you want to color: text, background, or link.
• Use text-* for text color.
• Use bg-* for background color.
• If the background is dark, add a readable text color like text-white.

Code example 1: text colors

<p class="text-success">Payment received.</p>
<p class="text-danger">Payment failed. Try again.</p>
<p class="text-muted">Last updated 2 minutes ago.</p>

These classes color only the text. They are great for status messages.

Code example 2: background colors

<div class="bg-primary text-white p-3">Welcome banner</div>
<div class="bg-warning text-dark p-3">Please check your details</div>

bg-primary changes the background. text-white makes the text readable. p-3 adds padding so the content is not tight.

Common mistakes

• Using a dark background without changing the text color (text becomes hard to read).
• Using color only to explain meaning (some users cannot see the difference).
• Mixing too many different colors in one small area (it looks messy).

Tips / best practices

• Always check contrast: dark background needs light text, and light background needs dark text.
• Use color with icons or words (example: "Error:") so meaning is clear.
• Keep a consistent pattern: success=green, danger=red, warning=yellow.

Spacing

What it is: Spacing utilities control margin and padding using simple classes. They help you add breathing room without writing custom CSS.

Why it is used (real-life example): On a form, you need space between labels and inputs so the page is easy to scan and tap on a phone.

Step-by-step

• Choose what you want: margin (m) or padding (p).
• Choose the side: t top, b bottom, s start, e end, x left+right, y top+bottom.
• Choose a size number: 0 to 5 (bigger number means more space).
• Apply the class to the element that needs space.

Code example 1: margins for vertical spacing

<h5 class="mb-3">Contact us</h5>
<p class="mb-4">We reply within 24 hours.</p>
<button class="btn btn-primary" type="button">Send</button>

mb-3 and mb-4 add bottom margin, creating space under the heading and paragraph.

Code example 2: padding inside a box

<div class="border p-3">
  <p class="mb-0">This card-like box has padding.</p>
</div>
<div class="bg-light p-5">Big padded area</div>

p-3 adds inner space so text does not touch the border. mb-0 removes the default margin on the paragraph so spacing stays controlled.

Common mistakes

• Adding margin to a parent when you wanted padding inside it (the layout looks wrong).
• Stacking many spacing classes without a plan (hard to maintain).
• Forgetting that some elements (like <p>) already have default margins.

Tips / best practices

• Use spacing utilities to create consistent rhythm (example: use mb-3 between form groups).
• Reset default margins when needed with mb-0 or mt-0.
• Prefer fewer, clearer classes over many tiny adjustments.

Breakpoints

What it is: Breakpoints are screen sizes where your layout can change. Bootstrap uses names like sm, md, lg, and xl.

Why it is used (real-life example): A 3-column layout can look good on a laptop, but on a phone it is too tight. With breakpoints, you can switch to 1 column on small screens.

Step-by-step

• Pick the smallest screen you want to support (usually phones). Start simple there.
• Add responsive classes that activate at a breakpoint, like col-md-4.
• Remember: md means “md and up”. Below md, it falls back to the non-breakpoint version.

Code example 1: Responsive columns

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">Card 1</div>
    <div class="col-12 col-md-4">Card 2</div>
    <div class="col-12 col-md-4">Card 3</div>
  </div>
</div>

This makes each card full width on small screens (col-12). From md and up, you get three equal columns (col-md-4).

Code example 2: Responsive visibility with display utilities

<p class="d-none d-md-block">Shown on md and larger</p>
<p class="d-block d-md-none">Shown only on small screens</p>

Bootstrap display classes let you hide or show content at certain sizes.

Common mistakes

• Thinking col-md-6 applies only at md. It applies at md and larger.
• Using too many breakpoint rules at once, which makes layout hard to read.
• Forgetting a base class like col-12, so small screens get an unexpected width.

Tips / best practices

• Design mobile-first: start simple, then add bigger-screen improvements.
• Test by resizing your browser or using device mode in DevTools.
• Use the fewest breakpoints needed for a clean result.

Gutters

What it is: Gutters are the space between columns in a .row. Bootstrap controls this with gutter classes like g-3, gx-4, and gy-2.

Why it is used (real-life example): In a product grid, you want comfortable spacing between cards so the page is easy to scan and tap.

Step-by-step

• Create a row with columns inside.
• Add a gutter class to the row: g-* changes both horizontal and vertical spacing.
• Use gx-* for only left/right gaps, and gy-* for only top/bottom gaps.

Code example 1: Set both directions

<div class="container">
  <div class="row g-4">
    <div class="col-6"><div class="border p-3">A</div></div>
    <div class="col-6"><div class="border p-3">B</div></div>
    <div class="col-6"><div class="border p-3">C</div></div>
    <div class="col-6"><div class="border p-3">D</div></div>
  </div>
</div>

g-4 adds equal spacing between all items, horizontally and vertically.

Code example 2: Different horizontal and vertical gutters

<div class="row gx-5 gy-2">
  <div class="col-md-4"><div class="border p-2">One</div></div>
  <div class="col-md-4"><div class="border p-2">Two</div></div>
  <div class="col-md-4"><div class="border p-2">Three</div></div>
</div>

This makes bigger left/right gaps (gx-5) and smaller top/bottom gaps (gy-2).

Common mistakes

• Adding padding to columns to “fake” gutters, then getting uneven spacing.
• Putting gutter classes on columns instead of the row.
• Using very large gutters on small screens, causing cramped content.

Tips / best practices

• Use gutters first, then add component padding (p-*) only when needed.
• Pick one gutter size for a section to keep the design consistent.
• Test touch targets on phones; too much space can waste screen area.

Alignment

What it is: Alignment controls where items sit: left, center, right, top, or bottom. In Bootstrap, you often align things using flex utilities like d-flex, justify-content-*, and align-items-*.

Why it is used (real-life example): In a header, you may want a logo on the left and a login button on the right. Alignment utilities make this quick without custom CSS.

Step-by-step

• Turn a container into a flex row with d-flex.
• Use justify-content-between to push items apart (left and right).
• Use align-items-center to vertically center items in the row.
• For text, use text alignment classes like text-center.

Code example 1: Header row alignment

<div class="container">
  <div class="d-flex justify-content-between align-items-center border p-3">
    <strong>MySite</strong>
    <a class="btn btn-primary" href="#">Login</a>
  </div>
</div>

The row becomes flex. One item stays at the start, the other moves to the end, and both are vertically centered.

Code example 2: Center a box inside a section

<div class="d-flex justify-content-center align-items-center border" style="height: 200px;">
  <div class="border p-3">Centered box</div>
</div>

This centers the inner box both horizontally and vertically.

Common mistakes

• Forgetting d-flex, then justify-content-* does nothing.
• Using text-center to try to move whole blocks. It only centers inline content like text.
• Centering with large margins instead of using flex utilities, which breaks on different screen sizes.

Tips / best practices

• Use flex utilities for layout alignment, and text utilities for text alignment.
• Add responsive variants when needed, like justify-content-md-between.
• Keep alignment rules close to the element they affect to stay readable.

Navbar

What it is: A navbar is the top menu of a website. It usually has your brand name and links to pages.

Why it is used (real-life example): On an online shop, the navbar lets people go to "Home", "Products", "Cart", and "Contact" from any page.

Step-by-step

• Create a <nav> element and add navbar.
• Choose a color style like navbar-dark bg-dark or navbar-light bg-light.
• Wrap content in a container so it lines up with the page.
• Use navbar-brand for the site name/logo.
• Use navbar-nav and nav-link for links.

Code example 1: Simple navbar

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MySite</a>
    <ul class="navbar-nav flex-row gap-3">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Explain the code: navbar makes it look like a Bootstrap menu. bg-dark gives a dark background. The links use nav-link for correct spacing and colors.

Code example 2: Responsive navbar with toggle button

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Store</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      </ul>
    </div>
  </div>
</nav>

Explain the code: navbar-expand-lg means the menu is expanded on large screens. On small screens it collapses. The button uses data-bs-toggle="collapse" to open/close the menu. ms-auto pushes links to the right.

Common mistakes

• Forgetting Bootstrap JavaScript: the toggle button will not work without it.
• Mismatch between data-bs-target and the id of the collapse area.
• Using navbar-dark with a light background (text can become hard to read).

Tips / best practices

• Keep link text short so the navbar stays clean.
• Use a container to align with the rest of your layout.
• Choose contrast: dark navbar with light text, or light navbar with dark text.

Forms

What it is: A form is a set of inputs where a user types data, like name, email, password, or choices.

Why it is used (real-life example): A login form lets a user enter email and password to access their account.

Step-by-step

• Wrap inputs inside a <form> element.
• Use form-label for labels.
• Use form-control for text-like inputs and form-select for dropdowns.
• Group spacing using utilities like mb-3.
• Use btn classes for the submit button.

Code example 1: Basic login form

<form>
  <div class="mb-3">
    <label class="form-label" for="email">Email address</label>
    <input class="form-control" id="email" type="email" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label class="form-label" for="pass">Password</label>
    <input class="form-control" id="pass" type="password" placeholder="Enter password">
  </div>
  <button class="btn btn-primary" type="submit">Sign in</button>
</form>

Explain the code: form-control gives inputs full width and nice styling. Each field is in a mb-3 block to add space below it.

Code example 2: Checkbox and select

<form>
  <div class="mb-3">
    <label class="form-label" for="role">Role</label>
    <select class="form-select" id="role">
      <option selected>Choose...</option>
      <option value="1">Student</option>
      <option value="2">Teacher</option>
    </select>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" id="news" type="checkbox">
    <label class="form-check-label" for="news">Send me updates</label>
  </div>
  <button class="btn btn-success" type="submit">Save</button>
</form>

Explain the code: form-select styles the dropdown. form-check gives proper layout for a checkbox with a label.

Common mistakes

• Not matching for on label with the input id (hurts usability).
• Using form-control on a select (use form-select instead).
• Forgetting input type like email or password.

Tips / best practices

• Group related fields and keep labels clear.
• Use placeholders only as hints, not as the only label.
• Test form spacing on mobile screens.

Cards

What it is: A card is a flexible box for showing content like a product, a blog post, or a user profile. It can include an image, title, text, and buttons.

Why it is used (real-life example): A product list often uses cards so each item looks neat and consistent.

Step-by-step

• Create a wrapper with card.
• Put content inside card-body.
• Use card-title and card-text for readable text styles.
• Add an image using card-img-top when needed.
• Place a button inside the card for actions like "Read more" or "Buy".

Code example 1: Basic card

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Starter Plan</h5>
    <p class="card-text">Good for trying the service with basic features.</p>
    <a href="#" class="btn btn-primary">Choose</a>
  </div>
</div>

Explain the code: card creates the border and shape. card-body adds padding. The button uses normal Bootstrap button classes.

Code example 2: Card with image

<div class="card" style="width: 20rem;">
  <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=80" class="card-img-top" alt="Product">
  <div class="card-body">
    <h5 class="card-title">Smart Watch</h5>
    <p class="card-text">Track steps and notifications in one place.</p>
    <a href="#" class="btn btn-outline-secondary">View details</a>
  </div>
</div>

Explain the code: card-img-top makes the image fit the card width and sit at the top. Text and buttons go inside card-body so spacing looks correct.

Common mistakes

• Putting text directly inside card without card-body (padding will be missing).
• Using very large images without cropping (cards become uneven heights).
• Adding too much text, making cards hard to scan.

Tips / best practices

• Keep titles short and make the main action button clear.
• Use consistent image sizes for a clean grid of cards.
• When showing many cards, place them inside Bootstrap columns so they wrap nicely.

Utilities

What it is: Utilities are small Bootstrap classes that do one job. They change a single style like display, width, or border.

Why it is used: In real projects, you often need a tiny change without writing custom CSS. For example, you may want to hide a badge on mobile or add a quick border to a card.

Step-by-step

• Find the one thing you want to change (example: make an element hidden).
• Pick the utility class that matches that change (example: d-none).
• Add it directly to the element in the class attribute.
• If needed, use responsive versions like d-md-block to change behavior at certain screen sizes.

Code example 1: Display utilities

<div class="d-none d-md-block p-2 border"><strong>Desktop only</strong></div>
<div class="d-block d-md-none p-2 border">Mobile only</div>

Here, the first box is hidden on small screens with d-none and becomes visible from md and up with d-md-block.

Code example 2: Sizing and border utilities

<div class="w-50 mx-auto border border-2 rounded p-3">
  This box is 50% width, centered, and has a border.
</div>

w-50 sets width, mx-auto centers it, and border classes add the border style.

Common mistakes

• Using too many utilities so HTML becomes hard to read.
• Forgetting responsive prefixes, then the page looks wrong on mobile.
• Mixing utilities that fight each other (example: d-none and d-block at the same size).

Tips / best practices

• Use utilities for small changes. Use custom CSS only when you repeat the same style many times.
• Prefer responsive utilities to keep layouts clean across devices.
• Group related utilities together in the class list to make it easier to scan.

Images

What it is: Bootstrap gives helper classes for images, like making them responsive, adding rounded corners, and aligning them.

Why it is used: In real life, product photos and profile pictures must look good on all screens. A responsive image will shrink on small devices instead of breaking the layout.

Step-by-step

• Add an <img> tag with src and alt.
• Add img-fluid so the image scales with its parent.
• Add shape helpers like rounded or rounded-circle.
• Use utilities like d-block and mx-auto to center it.

Code example 1: Responsive image

<img src="photo.jpg" class="img-fluid" alt="A laptop on a desk">

img-fluid adds max-width: 100% and height: auto so it scales correctly.

Code example 2: Avatar style

<img src="avatar.png" class="rounded-circle img-fluid d-block mx-auto" style="width: 120px;" alt="User avatar">

This makes a circle image and centers it. The inline style sets a fixed size so it looks like an avatar.

Common mistakes

• Forgetting the alt text, which hurts accessibility.
• Not using img-fluid, so the image overflows on small screens.
• Using a very large image file, which makes the page slow.

Tips / best practices

• Always include clear alt text. If the image is only decoration, use empty alt: alt="".
• Compress images and use modern formats when possible.
• Use rounded lightly; keep a consistent style across your site.

Tables

What it is: Bootstrap table classes style HTML tables so they look clean and readable. You can add stripes, borders, and hover effects without writing CSS.

Why it is used: In real apps, you often show data like users, orders, or payments. Tables help people scan rows and columns quickly.

Step-by-step

• Create a normal HTML table with <table>, <thead>, and <tbody>.
• Add table to activate Bootstrap styling.
• Add optional classes like table-striped or table-hover.
• If the table is wide, wrap it with table-responsive so it scrolls on small screens.

Code example 1: Basic styled table

<table class="table">
  <thead>
    <tr>
      <th scope="col">Order</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1001</td>
      <td>Paid</td>
    </tr>
  </tbody>
</table>

table makes spacing and borders look consistent and readable.

Code example 2: Responsive, striped, hover table

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sam</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

table-responsive adds horizontal scrolling on small screens so columns do not get squished.

Common mistakes

• Skipping <thead> and <th>, which hurts accessibility and clarity.
• Putting table-responsive on the table instead of a wrapper div.
• Using tables for page layout instead of data (tables are for data only).

Tips / best practices

• Use clear column headings with scope="col".
• Add table-hover for clickable rows to help users see what they point at.
• Keep columns simple on mobile. If you have too many columns, consider showing fewer columns or a different UI.

Modal

What it is: A modal is a popup window that sits on top of the page. It can show a message, a form, or a confirmation step.

Why it is used (real-life example): When a user clicks “Delete account”, you can open a modal to confirm the action before it happens.

Step-by-step

• Create a button that will open the modal.
• Add data-bs-toggle="modal" and data-bs-target="#id" to the button.
• Create the modal markup with the same id.
• Inside the modal, use header, body, and footer sections for clean structure.
• Make sure Bootstrap’s JS bundle is loaded, or the modal will not open.

Code example 1: Basic modal

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#helpModal">
  Open help
</button>

<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="helpModalLabel">Help</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is a simple message inside a modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap JS bundle (required for modals) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Code example 2: Centered modal

<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#centerModal">Open centered</button>

<div class="modal fade" id="centerModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        This modal is vertically centered.
      </div>
    </div>
  </div>
</div>

Common mistakes

• Forgetting to load bootstrap.bundle.min.js (the modal will not open).
• Using the wrong data-bs-target id (button points to a modal that does not exist).
• Placing modal HTML inside a container with overflow: hidden so it looks cut off.

Tips / best practices

• Keep modals short. If content is long, consider a new page.
• Use clear action buttons like Cancel and Confirm.
• Use unique ids for each modal to avoid conflicts.

Dropdown

What it is: A dropdown is a small menu that opens when you click a button or a link.

Why it is used (real-life example): In a user profile area, a dropdown can show “Settings”, “Billing”, and “Log out” without taking extra space.

Step-by-step

• Wrap everything in a div with dropdown.
• Add a button with data-bs-toggle="dropdown".
• Add a list with class dropdown-menu.
• Put each item inside li and use dropdown-item for the link/button style.
• Load Bootstrap’s JS bundle so the dropdown can open and close.

Code example 1: Simple dropdown menu

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Profile
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Settings</a></li>
    <li><a class="dropdown-item" href="#">Billing</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Log out</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Code example 2: Dropup

<div class="dropup">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Open up
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
    <li><a class="dropdown-item" href="#">Action 2</a></li>
  </ul>
</div>

Common mistakes

• Not loading the JS bundle (the menu will never open).
• Forgetting dropdown-toggle so the button looks wrong.
• Putting dropdown-menu outside the wrapper, causing bad positioning.

Tips / best practices

• Keep menu text short so users can scan it quickly.
• Use dropdown-divider to separate groups of actions.
• Use meaningful link targets instead of # in real projects.

Collapse

What it is: Collapse lets you show and hide content. It is useful when you want a cleaner page with optional details.

Why it is used (real-life example): In an FAQ page, each question can open to show the answer only when the user clicks it.

Step-by-step

• Create a button (or link) that controls the collapsed area.
• Add data-bs-toggle="collapse" to the controller.
• Point to the target using data-bs-target="#id" (or href="#id" for links).
• Create a div with class collapse and the same id.
• Load Bootstrap’s JS bundle so the animation works.

Code example 1: Show/hide details

<p>
  <button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#moreInfo" aria-expanded="false" aria-controls="moreInfo">
    Toggle more info
  </button>
</p>

<div class="collapse" id="moreInfo">
  <div class="card card-body">
    This text is hidden at first. It appears when you click the button.
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Code example 2: Default open

<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#openByDefault" aria-expanded="true" aria-controls="openByDefault">
  Toggle section
</button>

<div class="collapse show" id="openByDefault">
  <div class="card card-body">
    This area starts open because it has "show".
  </div>
</div>

Common mistakes

• Using an id that does not match the button’s target.
• Forgetting the collapse class on the content, so nothing happens.
• Nesting collapse inside clickable elements in a confusing way, causing unexpected toggles.

Tips / best practices

• Use collapse for optional details, not for important required content.
• Keep the hidden content readable with padding (example: card card-body).
• Use clear button text like “Show details” and “Hide details”.