Im trying to make a nav-bar using bootstrap 4 when clicked on a nav-item toggles two divs. In other examples I saw that when using data-target you could add multiple #contents.
<a data-target="#tab-content-2, #cmcAGVL">
<nav>
<div class="nav nav-tabs" id="nav-home-tab" role="tablist">
<a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-1, #cmcVGVL" role="tab" aria-controls="nav-home" aria-selected="true">1</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-2, #cmcAGVL" role="tab" aria-controls="nav-profile" aria-selected="false">2</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-1-1, #cmcIVGVL" role="tab" aria-controls="nav-contact" aria-selected="false">Interieur 1</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-2-2, #cmcIAGVL" role="tab" aria-controls="nav-contact" aria-selected="false">Interieur 2</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-3-3, #cmcBG" role="tab" aria-controls="nav-contact" aria-selected="false">Begane grond</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-4-4, #cmcV1" role="tab" aria-controls="nav-contact" aria-selected="false">Eerste verdieping</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-5-5, #cmcV2" role="tab" aria-controls="nav-contact" aria-selected="false">Tweede verdieping</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-6-6, #cmcV3" role="tab" aria-controls="nav-contact" aria-selected="false">Derde verdieping</a>
<div class="btn-group">
<button type="button" class="nav-item nav-link rounded-0 dropdown-toggle" data-toggle="dropdown">Geselecteerde opties</button>
<div class="dropdown-menu" id="insert">
</div>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane active home" id="tab-content-1" role="tabpanel" aria-labelledby="nav-home-tab"></div>
<div class="tab-pane" id="tab-content-2"></div>
<div class="tab-pane" id="tab-content-1-1" role="tabpanel" aria-labelledby="nav-home-tab"></div>
<div class="tab-pane" id="tab-content-2-2" role="tabpanel" aria-labelledby="nav-home-tab"></div>
<div class="tab-pane" id="tab-content-3-3"></div>
<div class="tab-pane" id="tab-content-4-4"></div>
<div class="tab-pane" id="tab-content-5-5"></div>
<div class="tab-pane" id="tab-content-6-6"></div>
<div class="tab-pane active" id="cmcVGVL"></div>
<div class="tab-pane" id="cmcAGVL" >B</div>
<div class="tab-pane" id="cmcIVGVL">C</div>
<div class="tab-pane" id="cmcIAGVL">D</div>
<div class="tab-pane" id="cmcBG">E</div>
<div class="tab-pane" id="cmcV1">F</div>
<div class="tab-pane" id="cmcV2">G</div>
<div class="tab-pane" id="cmcV3">H</div>
</div>
I found the answer in a different thread;
Put the multiple data-targets in a seperate div then put the different tabs in that div
<a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-1" role="tab" aria-controls="nav-home" aria-selected="true">Voorgevel</a>
<div class="tab-pane" id="tabs-1" role="tabpanel">
<div class="tab-pane" id="tab-content-2"></div>
<div class="tab-pane" id="cmcIAGVL"></div>
</div>
Related
I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link disabled" href="#">Disabled</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>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
I've been working at this, unfortunately I can't get the tab to be highlighted when the page loads.
I have tried using other suggestions in stack overflow such as jquery and window.onload, but none of these solutions work.
<div class="row">
<div class="col-sm-12">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link" id="nav-active-tab" data-toggle="tab" href="#nav-active" role="tab" aria-controls="nav-active" aria-selected="true">ACTIVE</a>
<a class="nav-item nav-link" id="nav-notactive-tab" data-toggle="tab" href="#nav-notactive" role="tab" aria-controls="nav-notactive" aria-selected="false">INACTIVE</a>
<a class="nav-item nav-link" id="nav-pending-tab" data-toggle="tab" href="#nav-pending" role="tab" aria-controls="nav-pending" aria-selected="false">PENDING</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane active in" id="nav-active" role="tabpanel" aria-labelledby="nav-active-tab">
<div class="card">
<div class="card-header">
simply do (javascript)
document.querySelector('a[data-toggle]').focus()
This solved my issue in case anyone needs it...
<a class="nav-item nav-link active" on the one you want the tab to show active.
I'm struggling to make Bootstrap 4 nav tabs act in a truly responsive way.
I attached the code and here is a demonstration of what I need.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container p-4">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
Use flex-nowrap class in your nav class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container p-4">
<nav>
<div class="nav nav-tabs flex-nowrap" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
I tried everything, but I couldn't bring this menu-item to the center. Here is my code:
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
For that, you can use d-flex justify-content-center bootstrap class.
<div class="d-flex justify-content-center">
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
You can use <center></center> to center the navbar
<center>
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
</center>
Make title container as display:block and each title display:inline-block:
.nav {
display: block;
text-align: center;
}
.nav > a {
display: inline-block;
}
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
I'm trying to make the code below (from bootstrap v4) scrollable, considering the v-pills-tab as a child from a container that has height and max-height 100%:
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
My problem is when I add more nav-links than the container-div support, these links stay out the limit of 100%.
nav class in the first div has display: flex;. Turn off this style and you will be able to scroll vertically. It works for me.