0
0
Bootsrapmarkup~30 mins

Offcanvas component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Bootstrap Offcanvas Component
📖 Scenario: You want to add a sidebar menu that slides in from the left side of the screen when a button is clicked. This is useful for navigation on small screens or mobile devices.
🎯 Goal: Build a simple Bootstrap offcanvas component that opens from the left side when a button is clicked. The offcanvas should have a header with a title and a close button, and some body content.
📋 What You'll Learn
Use Bootstrap 5 classes and structure for the offcanvas component
Create a button that toggles the offcanvas visibility
The offcanvas should slide in from the left side
Include a header with a title and a close button inside the offcanvas
Add some placeholder text inside the offcanvas body
💡 Why This Matters
🌍 Real World
Offcanvas components are commonly used in mobile navigation menus and sidebars to save screen space and improve user experience.
💼 Career
Knowing how to implement Bootstrap offcanvas components is useful for front-end developers building responsive and interactive web interfaces.
Progress0 / 4 steps
1
Set up the basic HTML structure with Bootstrap CSS link
Create a basic HTML5 document with lang="en", meta charset="UTF-8", and meta viewport tags. Include the Bootstrap 5 CSS link inside the <head>. Add an empty <body> section.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link from a CDN inside the <head> section.

2
Add a button to toggle the offcanvas
Inside the <body>, add a <button> with class="btn btn-primary", type="button", data-bs-toggle="offcanvas", and data-bs-target="#offcanvasExample". The button text should be Open Menu.
Bootsrap
Need a hint?

Use data-bs-toggle="offcanvas" and data-bs-target="#offcanvasExample" on the button to link it to the offcanvas.

3
Create the offcanvas element with header and body
Below the button, add a <div> with class="offcanvas offcanvas-start", tabindex="-1", id="offcanvasExample", and aria-labelledby="offcanvasExampleLabel". Inside it, add a <div> with class="offcanvas-header" containing a <h5> with id="offcanvasExampleLabel" and text Menu, and a close button with class="btn-close", data-bs-dismiss="offcanvas", and aria-label="Close". Then add a <div> with class="offcanvas-body" containing the text This is the offcanvas content.
Bootsrap
Need a hint?

Use the Bootstrap offcanvas structure with offcanvas-start to slide in from the left.

4
Add Bootstrap JavaScript bundle for functionality
Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from the CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This enables the offcanvas toggle functionality.
Bootsrap
Need a hint?

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive components.