Offcanvas example 2
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Offcanvas | |
| Description | Offcanvas in light mode and dark mode | |
| Provider | Skin | |
| Note | Dark mode needs the CSS marked "Bootstrap dark mode" on MediaWiki:Common.css, because the Chameleon skin leaves out Bootstrap's dark mode. | |
| Reference | getbootstrap.com - color modes | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Light mode
- Code
<div class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-example" role="button" tabindex="0">Show the panel</div>
<div class="offcanvas offcanvas-start" id="offcanvas-example" tabindex="0" aria-labelledby="offcanvas-example-title">
<div class="offcanvas-header">
<div class="offcanvas-title h5" id="offcanvas-example-title">Components</div>
<div class="btn-close" data-bs-dismiss="offcanvas" role="button" tabindex="0" aria-label="Close"></div>
</div>
<div class="offcanvas-body">
* [[Accordion]]
* [[Alert]]
* [[Card]]
</div>
</div>
- Result
Show the panel
Dark mode
The code is the same as for light mode, see Color modes.
- Result
