Offcanvas

1
2  // Offcanvas
3  <a
4    class="btn btn-primary"
5    data-bs-toggle="offcanvas"
6    href="#offcanvasExample"
7    role="button"
8    aria-controls="offcanvasExample"
9  >
10    Link with href
11  </a>
12  <button
13    class="btn btn-primary"
14    type="button"
15    data-bs-toggle="offcanvas"
16    data-bs-target="#offcanvasExample"
17    aria-controls="offcanvasExample"
18  >
19    Button with data-bs-target
20  </button>
21
22  <div
23    class="offcanvas offcanvas-end"
24    tabIndex="-1"
25    id="offcanvasExample"
26    aria-labelledby="offcanvasExampleLabel"
27  >
28    <div class="offcanvas-header">
29      <h5 class="offcanvas-title" id="offcanvasExampleLabel">
30        Offcanvas
31      </h5>
32      <button
33        type="button"
34        class="btn-close"
35        data-bs-dismiss="offcanvas"
36        aria-label="Close"
37      ></button>
38    </div>
39    <div class="offcanvas-body">
40      <div>
41        Some text as placeholder. In real life you can have the elements you
42        have chosen. Like, text, images, lists, etc.
43      </div>
44    </div>
45  </div>
46