In Bootstrap 4 beta you can add a navigation to the card component. https://getbootstrap.com/docs/4.0/components/card/#navigation
But there is actual no working example how to switch between different tabs within a card.
for example, this is not working for me. i have added the javascript file too.
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#foo">Foo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bar">Bar</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="foo">FOO</div>
<div class="tab-pane" id="bar">BAR</div>
</div>
</div>
</div>
Just add . card {display:inline-block;} to make them display in a line.
Card-deck is not supported in Bootstrap 5. Save this answer.
Make the card and the inner container flex-columns, then tell the container to xpand as much as possible with flex:1 . Then push the h4 to the bottom of the container with margin-top:auto . Save this answer.
try like this
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-right" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
</div>
learn more about it https://getbootstrap.com/docs/4.0/components/navs/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With