The vertical pills layout is exactly what I want for desktop devices, but for small screen sizes, I want it to be more compact. I need the tab-pane text to display under the nav-link - like under each individual nav-link, not below the whole group of nav-pills.
The following is the base example on the Bootstrap v5 documentation:
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</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>
</div>
I tried moving the tab-pane elements directly under their perspective nav-links, but I couldn't get it to work.
Is this possible to do what I'm envisioning? Or alternatively, is there a better way to set this up?
Here is an example using Bootstrap 5's responsive grid classes and CSS media queries to achieve the desired behavior:
<div class="d-flex flex-column flex-md-row align-items-start">
<div class="nav flex-column nav-pills w-100 w-md-auto me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content w-100" 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>
</div>
<style>
#media (max-width: 767.98px) {
.nav-pills {
display: flex;
flex-wrap: wrap;
}
.tab-content {
display: flex;
flex-wrap: wrap;
}
.tab-pane {
width: 100%;
}
}
</style>`
This will display the nav-pills vertically on larger screens, and horizontally on smaller screens, with the tab-pane elements displayed directly underneath the corresponding nav-link.
Related
I am able to toggle across the tabs on larger devices but on the smaller devices, it does not work. There are also no errors in the console. The tab is also wrapped in a div that has a z-index of -1. I need it to have a z-index of -1 so that when I scroll up it goes under another div. If I remove the z-index from the wrapper I am able to click the tabs.
I cannot add a higher z-index to the div I'd like these tab items to scroll under because a dropdown list from the navbar will be hidden behind it.
<ul class="nav nav-tabs innerTab" id="profileTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button"
role="tab" aria-controls="personal" aria-selected="true">Personal Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button"
role="tab" aria-controls="account" aria-selected="false">Account
Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="kyc-tab" data-bs-toggle="tab" data-bs-target="#kyc" type="button" role="tab"
aria-controls="kyc" aria-selected="false">
Documents</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button"
role="tab" aria-controls="password" aria-selected="false">Password change</button>
</li>
</ul>
<div class="tab-content" id="profileTabContent">
<div class="tab-pane show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
P
</div>
<div class="tab-pane" id="account" role="tabpanel" aria-labelledby="account-tab">
A
</div>
<div class="tab-pane" id="kyc" role="tabpanel" aria-labelledby="kyc-tab">K
</div>
<div class="tab-pane" id="password" role="tabpanel" aria-labelledby="password-tab">P
</div>
</div>
Did u tried wrap or change containers into "label", may be need add them display: block; and remove some padding/margin to keep your layout
I have a menu on website. Below is the HTML code.
<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
<div class="container position-relative">
<a class="navbar-brand" href="./index.html">
<img class="navbar-brand-regular" src="logo.png"/>
<img class="navbar-brand-sticky" src="logo.png"/>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-inner">
<!-- Mobile Menu Toggler -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
On Mobile menu, when i click on a menu item, the menu did not closed. Below is the script code.
Did I miss anything?
// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
$('[data-toggle="navbarToggler"]').click(function () {
$('.navbar').toggleClass('active');
$('body').toggleClass('canvas-open');
});
// MAIN MENU TOGGLER ICON
$('.navbar-toggler').click(function () {
$('.navbar-toggler-icon').toggleClass('active');
});
Bootstrap will handle all toggle/collapse by itself you do not need to write extra JS. Toggle button must not duplicate as you did to avoid messing up the navbar functioning.
Below is the answer. I optimized your params in few places. If my answer works for you, please tick it as final answer and upvote it so other people with same problem will get help too. Cheers
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
</ul>
</div>
</div>
</nav>
I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
I have some genres and relevant Tv shows. Do I necessarily need to convert nav pills into react router Link tags? Or I can use the following bootstrap navigation that is already set up to show the tab content. Would using the later be considered as a bad practice?
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-action-tab" data-toggle="pill" href="#v-pills-action" role="tab" aria-controls="v-pills-action" aria-selected="true">action</a>
<a class="nav-link" id="v-pills-comedy-tab" data-toggle="pill" href="#v-pills-comedy" role="tab" aria-controls="v-pills-comedy" aria-selected="false">comedy</a>
<a class="nav-link" id="v-pills-thrill-tab" data-toggle="pill" href="#v-pills-thrill" role="tab" aria-controls="v-pills-thrill" aria-selected="false">thrill</a>
<a class="nav-link" id="v-pills-horror-tab" data-toggle="pill" href="#v-pills-horror" role="tab" aria-controls="v-pills-horror" aria-selected="false">horror</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-action" role="tabpanel" aria-labelledby="v-pills-action-tab">...</div>
<div class="tab-pane fade" id="v-pills-comedy" role="tabpanel" aria-labelledby="v-pills-comedy-tab">...</div>
<div class="tab-pane fade" id="v-pills-thrill" role="tabpanel" aria-labelledby="v-pills-thrill-tab">...</div>
<div class="tab-pane fade" id="v-pills-horror" role="tabpanel" aria-labelledby="v-pills-horror-tab">...</div>
</div>
</div>
</div>
I am using Reactjs and I am trying to use this list group from Bootstrap 4. However, when I change the A tags to <Link> the code does not work anymore, and will not display anything. What is the best way to have it rendered in React using <Link>?
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
e.g.
<a class="list-group-item list-group-item-action active"... into <Link className="list-group-item... >
I have played around with this code, and after removing the data-toggle="list" the code worked with the <Link> tags!