Navs and tabs example 3
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Navs and tabs | |
| Description | Tabs 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
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabs-example-chameleon" role="tab" tabindex="0">Chameleon</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#tabs-example-medik" role="tab" tabindex="0">Medik</span></li>
</ul>
<div class="tab-content border border-top-0 rounded-bottom p-3">
<div class="tab-pane fade show active" id="tabs-example-chameleon" role="tabpanel" tabindex="0">
[[Chameleon]] is a highly customizable skin that uses Bootstrap.
</div>
<div class="tab-pane fade" id="tabs-example-medik" role="tabpanel" tabindex="0">
[[Medik]] is a simple skin that bundles its own copy of Bootstrap.
</div>
</div>
- Result
Chameleon is a highly customizable skin that uses Bootstrap.
Medik is a simple skin that bundles its own copy of Bootstrap.
Dark mode
The code is the same as for light mode, see Color modes.
- Result
