Bootstrap 4 nav-tabs to keep the arrangement on a mobile screen - html

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>

Related

Why tabs are not changing nav nav-tabs?

I am using bootstrap for creating a tab list like below one:
The problem is that when I click on "Profile" or Contact, it changes nothing. I included the bootstrap library. I mean it doesn't remove the 'active', 'show' classes. Does someone know why?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

Somewhat unsure which approach you're after. This can work out of the box with Bootstrap 5 but you also tag this with Bootstrap 4.
For version 5 they changed:
data-toggle
to
data-bs-toggle
Here is the approach with no additions and uses Bootstrap 5. Note your code example brings in jQuery and that isn't needed.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" aria-controls="home" aria-selected="true" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-controls="home">
Home
</div>
<div class="tab-pane fade" id="menu1" role="tabpanel" aria-controls="profile">
Profile
</div>
<div class="tab-pane fade" id="menu2" role="tabpanel" aria-controls="contact">
Contact
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

Used below script and worked smoothly
$('#myTab a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})

Bootstrap 4: Two menus one display and one active menu item

I have one big menu that I need to divide into cols for mobile and desktop.
So I put put around it:
<div class="col-xl-12 col-md-12 col-6 first-set-skills">
Menu 1
</div>
<div class="col-xl-12 col-md-12 col-6 second-set-skills">
Menu 2
</div>
The problem is that I need both of them to act as one menu. Selecting one item from either of these should only display one result and one active menu item. But because I separated the menus, they show two active items in the menu:
Is there a way to make them both act as one menu, even though they are separated by divs ?
Here is the JSFiddle: https://jsfiddle.net/prozik/qLu9pfje/12/
Here is the bootstrap documentation for the nav (vertical) I followed: https://getbootstrap.com/docs/4.0/components/navs/
Here is the code:
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" 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>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</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"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>

There is a jQuery hack to get the desired output,
Add
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
And add id to nav-pills div. Check the snippet
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupOne">
<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>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupTwo">
<a class="nav-link" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>
</div>

Vertical tabs with sub-tabs Bootstrap

I created vertical tabs with Bootstrap, currently the "home tab" is not showing the tabbed content, kind of buggy. Also, I'm having trouble creating sub tabs to each individual vertical navs. Is it easier to create sub tabs with jQuery?
HTML
<nav class="navigation">
<ul class="menu nav-menu">
<div class="nav nav-tabs flex-column" id="nav-tab" role="tablist">
<li class="menu-item-has-children"><a class=" nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a></li>
</div>
</ul>
</nav>
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-12">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
home
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
profile
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
contact
</div>
<div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab">
about
</div>
</div>
</div>
Thanks!

Menu-item can't move center location

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>

Vertical nav-pills scrollable

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.