Offcanvas example 1
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Offcanvas | |
| Description | Offcanvas panels that slide in from the left and from the right | |
| Provider | Skin | |
| Note | The code differs a little from Bootstrap's documentation, because MediaWiki does not allow buttons in wikitext. | |
| Reference | getbootstrap.com - offcanvas | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Offcanvas from the left
- Code
<div class="btn btn-primary mb-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-components" role="button" tabindex="0">Show the components</div>
<div class="offcanvas offcanvas-start" id="offcanvas-components" tabindex="0" aria-labelledby="offcanvas-components-title">
<div class="offcanvas-header">
<div class="offcanvas-title h5" id="offcanvas-components-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]]
* [[Carousel]]
* [[Modal]]
[[Components|All components]]
</div>
</div>
- Result
Show the components
Offcanvas from the right
- Code
<div class="btn btn-secondary mb-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right" role="button" tabindex="0">Open on the right</div>
<div class="offcanvas offcanvas-end" id="offcanvas-right" tabindex="0" aria-labelledby="offcanvas-right-title">
<div class="offcanvas-header">
<div class="offcanvas-title h5" id="offcanvas-right-title">Placement</div>
<div class="btn-close" data-bs-dismiss="offcanvas" role="button" tabindex="0" aria-label="Close"></div>
</div>
<div class="offcanvas-body">
The class <code>offcanvas-end</code> places the panel on the right. Use <code>offcanvas-start</code>, <code>offcanvas-top</code> or <code>offcanvas-bottom</code> for the other edges.
</div>
</div>
- Result
Open on the right
Placement
The class offcanvas-end places the panel on the right. Use offcanvas-start, offcanvas-top or offcanvas-bottom for the other edges.
