🧠 Advanced Bootstrap Components

Explore some of Bootstrap’s most powerful UI elements like modals, tooltips, accordions, and offcanvas menus.

⚙️ Advanced Preview

Edit and play with advanced Bootstrap features below:

<div class="container my-4">
  <h3>Accordion</h3>
  <div class="accordion" id="exampleAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
          Section 1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          This is the first section of the accordion.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
          Section 2
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          This is the second section of the accordion.
        </div>
      </div>
    </div>
  </div>

<h3>Modal</h3>
  <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#myModal">
    Launch Modal
  </button>

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Bootstrap Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          This is a Bootstrap modal. You can close it by clicking outside or the "X".
        </div>
      </div>
    </div>
  </div>

<h3>Tooltip & Offcanvas</h3>
  <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="This is a tooltip!">
    Hover Me
  </button>

<button class="btn btn-dark ms-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">
    Open Offcanvas
  </button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Offcanvas Panel</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      You can slide in side menus like this one using <code>.offcanvas</code>.
    </div>
  </div>
</div>

💡 Tip: Some components like tooltips require JavaScript to initialize after page load. Bootstrap handles that via its bundle.