off-canvas in bootstrap

letskillsup

 

Offcanvas in Bootstrap - Explained Simply

  1. What is Offcanvas?

    • Offcanvas is a hidden sidebar or panel that slides in from the left, right, top, or bottom when triggered.
    • It is mainly used for navigation menus, sidebars, or additional content.

  2. Why Use Offcanvas?

    • Saves space on the screen.
    • Keeps the UI clean and uncluttered.
    • Enhances user experience, especially on mobile screens.

  3. Basic Structure of Offcanvas

    • Trigger Button: Used to open the offcanvas panel.
    • Offcanvas Container: The actual panel that slides in.
    • Close Button: Used to close the panel.

  4. How to Use Offcanvas in Bootstrap?

    • Add a button with data-bs-toggle="offcanvas" and data-bs-target="#offcanvasExample".
    • Create a div with class="offcanvas" and give it an ID (offcanvasExample).
    • Inside the div, add content like a title, body, and a close button.

  5. Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Offcanvas Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Button to trigger Offcanvas -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
    Open Sidebar
</button>

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>Some content inside the sidebar.</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

  1. Key Classes in Offcanvas

    • .offcanvas → Defines the offcanvas element.
    • .offcanvas-start → Slides in from the left.
    • .offcanvas-end → Slides in from the right.
    • .offcanvas-top → Slides in from the top.
    • .offcanvas-bottom → Slides in from the bottom.
    • .btn-close → Adds a close button inside the offcanvas.

  2. Customizing Offcanvas

    • You can change the width using CSS:
    .offcanvas {
    width: 300px; /* Adjust width as needed */
}

  3. JavaScript Control (Optional)

    • You can open/close the offcanvas using JavaScript:
    var myOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));
myOffcanvas.show(); // Opens the offcanvas
myOffcanvas.hide(); // Closes the offcanvas

  4. Where is Offcanvas Used?

    • Mobile-friendly navigation menus.
    • Filters in eCommerce websites.
    • Side panels for additional content.

  5. Bootstrap Requirement

  • Offcanvas requires Bootstrap 5 or later.
  • Include Bootstrap CSS and JS files for it to work.

Let me know if you need more details! 🚀

0 Comments