I tried adding a tabbed nav to a page, like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
But it was being displayed incorrectly:
So I switch from Bootstrap 4.0.0 to 3.3.7, and it appears properly, but my split dropdown menu button breaks.
<li class="nav-item">
<div class="btn-group">
<button type="button" class="btn btn-primary">{{ session.username }}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="/get_messages">Messages</a>
<a class="dropdown-item" href="/get_friend_requests">Friend Requests</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</div>
</li>
How can I have both components display correctly? Switching between 4.0.0 and 3.3.7 breaks one or the other.
Nav-tabs work differently in bootstrap version 4, you need:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
Note sure about this, but bootstrap 4 documentation uses show class for the active tab-content (you may need to replace in with show):
<div id="home" class="tab-pane fade show active">
See here: W3Schools Bootstrap 4 nav-tabs
See here: Bootstrap 4 documentation
Related
Just like in the Inception movie, I'm trying to make a main navbar menu with dynamic tabs that contains a second navbar menu that shows other content.
I started the first nav-tabs menu using the template found at the Bootstrap 5 documentation page and it's running fine but the second nav-tab menu complicates things when trying to make it be triggered by a tab on the first menu. This gif explains better what I'm trying to do.
This the code I've written so far:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="second-stat-tab" aria-selected="true">STAT</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="inv-tab" data-bs-toggle="tab" data-bs-target="#inv" type="button" role="tab" aria-controls="inv" aria-selected="false">INV</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button" role="tab" aria-controls="map" aria-selected="false">MAP</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="radio-tab" data-bs-toggle="tab" data-bs-target="#radio" type="button" role="tab" aria-controls="radio" aria-selected="false">RADIO</button>
</li>
</ul>
<!-- BEGINNING OF SECOND TABLIST -->
<div class="tab-content" id="myTabContent">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<button class="nav-link" id="second-stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="stat" aria-selected="true">STATUS</button>
</li><li class="nav-item">
<button class="nav-link" id="special-tab" data-bs-toggle="tab" data-bs-target="#special" type="button" role="tab" aria-controls="special">SPECIAL</button>
</li>
</ul>
</div>
<!-- END OF THE SECOND TABLIST -->
<!-- This is the content of the tabs-->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="stat" role="tabpanel" aria-labelledby="second-stat-tab">This is the status tab sample content
<div class="center-image">
<img src="vault_boy-removebg-preview_CROPPED.png" alt="">
</div>
</div>
<div class="tab-pane fade" id="special" role="tabpanel" aria-labelledby="special-tab">SPECIAL</div>
<div class="tab-pane fade" id="perks" role="tabpanel" aria-labelledby="perks-tab">PERKS</div>
</div>
In this pen you can see the full code and the way the it behaves. I want the second nav-tab menu to show only as a result of clicking on the first tab of the first menu (the one called "STATS") but it just remains there.
i can't navigate into tabs pages only it show in URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..)
please help me
enter image description here
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link " id="home-tab" data-toggle="tab" href="#page1" role="tab" aria-controls="page1"
aria-selected="true">page one</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#page2" role="tab" aria-controls="page2"
aria-selected="false">page two</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#page3" role="tab" aria-controls="page3"
aria-selected="false">page three</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel">
page one
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" >
page two
</div>
<div class="tab-pane fade" id="page3" role="tabpanel">
page three
</div>
</div>
</div>
</div>
Try this :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Bootstrap from that link work perfect for my and i try this on your problem and i can navigate
I am new to bootstrap and want to have nav pills in my navigation bar to switch the content of the page (like tabs). Without the navbar it is working, but i would like to have it in my navbar.
This is my code so far:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
The issue i have, is that i can't switch back to an already opened "tab". I fi remove the "data-toggle" property, it works for the buttons, but not for the content switching.
Add the nav class to the nav-pills, and the content switching will work as expected for Tabs...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
Demo: https://www.codeply.com/go/Xr6tLFbqKj
I tried to use #href on my buttons in order to get them to change to another tab but all it ends up doing is adding #name in the url. How can I make it so my next and previous buttons change to the respective tab?
<div class="card text-left">
<div class="card-header bg-danger">
<ul class="nav nav-tabs" data-background-color="red">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" style="color:white" href="#generalinfo">General Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#companyinfo">Company Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#socialmedia">Social Media</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="generalinfo" role="tabpanel">
<form action="" id="generalInfo">
Next
</form>
</div>
</div>
</div>
<div class="tab-pane" id="companyinfo" role="tabpanel">
<form action="" id="companyInfo">
Back
Next
</form>
</div>
Any help would be greatly appreciated.
i m using bootstrap 4 tabs/pills code from w3school.
But i am facing problem. like when i am clicking on any link active not changing it is static on 1st link
<ul class="nav nav-tabs control-btn">
<li class="active"><a data-toggle="tab" href="#quiz01" class="btn btn-info" role="button">01</a></li>
<li><a data-toggle="tab" href="#quiz02" class="btn btn-info" role="button">02</a></li>
<li><a data-toggle="tab" href="#quiz03" class="btn btn-info" role="button">03</a></li>
<li><a data-toggle="tab" href="#quiz04" class="btn btn-info" role="button">04</a></li>
<li><a data-toggle="tab" href="#quiz05" class="btn btn-info" role="button">05</a></li>
<li><a data-toggle="tab" href="#quiz06" class="btn btn-info" role="button">06</a></li>
<li><a data-toggle="tab" href="#quiz07" class="btn btn-info" role="button">07</a></li>
<li><a data-toggle="tab" href="#quiz08" class="btn btn-info" role="button">08</a></li>
<li><a data-toggle="tab" href="#quiz09" class="btn btn-info" role="button">09</a></li>
<li><a data-toggle="tab" href="#quiz10" class="btn btn-info" role="button">10</a></li>
</ul>
<div id="quiz01" class="tab-pane fade-in active">
<h3>Question 01.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry,
Lorem Ipsum is simply dummy text of the printing and typesetting industry?
</p>
<p><input type="radio" name="value01" value="01"> <b>1.</b>Option one</p>
<p><input type="radio" name="value01" value="02"> <b>2.</b>Option Two</p>
<p><input type="radio" name="value01" value="03"> <b>3.</b>Option Three</p>
<p><input type="radio" name="value01" value="04"> <b>4.</b>Option Four</p>
<!-- Modal footer -->
<div class="modal-footer">
<a class="btn btn-success btnNext">Save & Next</a>
</div>
</div>
I got and idea from my friend.
Actually this not working on bootstrap4.
so i did add this code inside script
$(".nav-tabs li a").click(function(){
$(".nav-tabs li").removeClass("active");
$(this).parent().addClass("active");
});
And now it is working.. Thanks
Tabbed navigation requires Jquery to work, and needs to be included in the head of your page. I used jQuery 3.2.1 slim minified. If you add Jquery to your header and follow this code pattern using Aria it will work.
<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">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">Profile</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">Contact</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">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-
labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-
labelledby="nav-contact-tab">...</div>
</div>