Answers for "bootstrap navigation card tab"

0

bootstrap nav tabs example

<ul class="nav nav-tabs" 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 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>
Posted by: Guest on July-21-2020
0

bootstrap card with working nav tabs

<div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
                </li>
            </ul>
        </div>
        <div class="tab-content card-body">
            <div id="insta" class="tab-pane active">Instagram</div>
            <div id="face" class="tab-pane">Facebook</div>
            <div id="twit" class="tab-pane">Twitter</div>
        </div>
  </div>
Posted by: Guest on April-25-2020

Browse Popular Code Answers by Language