Navs and tabs example 4
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Navs and tabs | |
| Description | Tabs drawn as boxes, in light mode and dark mode | |
| Provider | Skin | |
| Note | Needs the CSS marked "For Navs and tabs example 4" on MediaWiki:Common.css. Dark mode also needs the CSS marked "Bootstrap dark mode" there, because the Chameleon skin leaves out Bootstrap's dark mode. | |
| Reference | getbootstrap.com - navs and tabs | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Light mode
- Code
<ul class="nav nav-tabs boxed-tabs" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="tab" data-bs-target="#boxed-tabs-alert" role="tab" tabindex="0">Alert</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#boxed-tabs-badge" role="tab" tabindex="0">Badge</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#boxed-tabs-card" role="tab" tabindex="0">Card</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#boxed-tabs-modal" role="tab" tabindex="0">Modal</span></li>
</ul>
<div class="tab-content border border-top-0 rounded-bottom p-3">
<div class="tab-pane fade show active" id="boxed-tabs-alert" role="tabpanel" tabindex="0">
[[Alert]] shows a short message in a colored box.
</div>
<div class="tab-pane fade" id="boxed-tabs-badge" role="tabpanel" tabindex="0">
[[Badge]] adds a small label or count to a text.
</div>
<div class="tab-pane fade" id="boxed-tabs-card" role="tabpanel" tabindex="0">
[[Card]] groups content in a bordered box with an optional header and footer.
</div>
<div class="tab-pane fade" id="boxed-tabs-modal" role="tabpanel" tabindex="0">
[[Modal]] opens a dialog on top of the page.
</div>
</div>
On MediaWiki:Common.css or MediaWiki:Chameleon.css:
.boxed-tabs {
gap: 4px;
}
.boxed-tabs .nav-link {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
cursor: pointer;
}
.boxed-tabs .nav-link:hover {
background-color: var(--bs-border-color);
}
.boxed-tabs .nav-link.active {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}
- Result
Alert shows a short message in a colored box.
Badge adds a small label or count to a text.
Card groups content in a bordered box with an optional header and footer.
Modal opens a dialog on top of the page.
Dark mode
The code is the same as for light mode, see Color modes.
- Result
