Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Bootstrap Components

Accordion, tabs, dropdowns, carousel and tooltips.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

Bootstrap's JavaScript components work with data-bs-* attributes, no code needed:

  • Accordion: collapsible panels.
  • Dropdown: data-bs-toggle="dropdown".
  • Tabs: .nav-tabs with data-bs-toggle="tab".
  • Carousel: image slideshows.
  • Tooltips and popovers (need a line of JavaScript to enable).

Key Takeaways: Bootstrap Components

Mastering Bootstrap Components helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Components Code Example

Bootstrap 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3">
  <div class="dropdown mb-3">
    <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">Choose course</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">HTML</a></li>
      <li><a class="dropdown-item" href="#">Python</a></li>
    </ul>
  </div>

  <div class="accordion" id="faq">
    <div class="accordion-item">
      <h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q1">Is it free?</button></h2>
      <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq"><div class="accordion-body">Yes, all tutorials are free.</div></div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#q2">Do I need to install anything?</button></h2>
      <div id="q2" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">No, the editor runs in your browser.</div></div>
    </div>
  </div>

  <button class="btn btn-outline-secondary mt-3" data-bs-toggle="tooltip" title="Hello from a tooltip!">Hover me</button>
</div>
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
</script>
Free sign-in required · Google login available

Bootstrap Components Practice Exercises

Check what you learned in “Bootstrap Components”.

/ 3 solved
Fill in the blank

Make a dropdown toggle button.

<button class="btn dropdown-toggle" data-bs-toggle="">Menu</button>
✓ Correct! Not quite. Try again.
Multiple choice

Which component shows collapsible panels where one opens at a time?

✓ Correct! Not quite. Try again.
Code challenge

Create a <details>-free accordion: a div.accordion containing one .accordion-item.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Bootstrap Modals
Next ❯
Bootstrap Utilities

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services