Tabs
Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
PHP is a popular general-purpose scripting language that is especially suited to web development.
It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.
<div class="card equal-card">
<div class="card-header">
<h5>Basic Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">HTML</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane" type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">CSS</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane" type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">PHP</button>
</li>
</ul>
<div class="tab-content" id="BasicContent">
<div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="html-tab" tabindex="0">
<p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.</p>
<p>It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
</div>
<div class="tab-pane fade" id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab" tabindex="0">
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p>
<p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
<div class="tab-pane fade" id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab" tabindex="0">
<p>PHP is a popular general-purpose scripting language that is especially suited to web development.</p>
<p>It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.</p>
</div>
</div>
</div>
</div>This is the content of tab one.
This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
This is the content of tab two.
This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
This is the content of tab three.
This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
<div class="card">
<div class="card-header code-header">
<h5>Outline Tabs</h5>
<a data-bs-toggle="collapse" href="#tab2" aria-expanded="false" aria-controls="tab2">
<i class="ti ti-code source" data-source="t2"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
</div>
</div>
</div>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<div class="card">
<div class="card-header">
<h5>Outline Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
</div>
</div>
</div>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<div class="card equal-card">
<div class="card-header">
<h5>Background Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="features-tab" data-bs-toggle="tab" data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane" aria-selected="true">
<i class="ti ti-disc pe-1 ps-1"></i> features
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane" aria-selected="false">
<i class="ti ti-history pe-1 ps-1"></i> History
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane" aria-selected="false">
<i class="ti ti-star pe-1 ps-1"></i> reviews
</button>
</li>
</ul>
<div class="tab-content" id="bgContent">
<div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel" aria-labelledby="features-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
</div>
<div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<div class="card">
<div class="card-header">
<h5>Outline Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
</div>
</div>
</div>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<div class="card equal-card">
<div class="card-header">
<h5>Vertical Tabs right side</h5>
</div>
<div class="card-body vertical-right-tab">
<ul class="nav nav-tabs app-tabs-secondary me-0 ms-3" id="vl-bg" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="vl-features-tab" data-bs-toggle="tab" data-bs-target="#vl-features-tab-pane" type="button" role="tab" aria-controls="vl-features-tab-pane" aria-selected="true">
<i class="ti ti-disc pe-1 ps-1"></i>
Features
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="vl-history-tab" data-bs-toggle="tab" data-bs-target="#vl-history-tab-pane" type="button" role="tab" aria-controls="vl-history-tab-pane" aria-selected="false">
<i class="ti ti-history pe-1 ps-1"></i>
History
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="vl-reviews-tab" data-bs-toggle="tab" data-bs-target="#vl-reviews-tab-pane" type="button" role="tab" aria-controls="vl-reviews-tab-pane" aria-selected="false">
<i class="ti ti-star pe-1 ps-1"></i>
Reviews
</button>
</li>
</ul>
<div class="tab-content text-sm-end" id="vl-bgContent">
<div class="tab-pane fade show active" id="vl-features-tab-pane" role="tabpanel" aria-labelledby="vl-features-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
</div>
<div class="tab-pane fade" id="vl-history-tab-pane" role="tabpanel" aria-labelledby="vl-history-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
</div>
<div class="tab-pane fade" id="vl-reviews-tab-pane" role="tabpanel" aria-labelledby="vl-reviews-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>Tabs Bottom Side
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
Justify Light Tabs
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
Image as Nav link
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
Some Implements
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.