mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 02:38:15 +04:00
48 lines
2.1 KiB
HTML
48 lines
2.1 KiB
HTML
<!-- Cards with tabs component -->
|
|
<div class="card-tabs">
|
|
<div class="tab-content">
|
|
<!-- Content of card #1 -->
|
|
<div id="tab-bottom-1" class="card tab-pane active show">
|
|
<div class="card-body">
|
|
<div class="card-title">Content of tab #1</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Content of card #2 -->
|
|
<div id="tab-bottom-2" class="card tab-pane">
|
|
<div class="card-body">
|
|
<div class="card-title">Content of tab #2</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Content of card #3 -->
|
|
<div id="tab-bottom-3" class="card tab-pane">
|
|
<div class="card-body">
|
|
<div class="card-title">Content of tab #3</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Content of card #4 -->
|
|
<div id="tab-bottom-4" class="card tab-pane">
|
|
<div class="card-body">
|
|
<div class="card-title">Content of tab #4</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Cards navigation -->
|
|
<ul class="nav nav-tabs nav-tabs-bottom">
|
|
<li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
|
|
<li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
|
|
<li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
|
|
<li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
|
|
</ul>
|
|
</div> |