I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
As you can see the tabs does not toggle.
From what I learnt:
include JQuery before Bootstrap: done
set data-bs-toggle and data-bs-target: done
use classes like nav-link, tab-pane, etc... : done
What still am I missing?
It wasn't easy to spot but you have an error on your second button
you put data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" into the <i> tag
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
Related
I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));
You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.
I am trying to keep selected tab active on page refresh. Important - i'm using bootstrap 5.1. I checked all the same questions for different versions, none of them worked.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
There is documentation for tabs: https://getbootstrap.com/docs/5.1/components/navs-tabs/#methods
I'm so sorry i dont know javascript yet but i will be gladness if u help me with this small thing.
you need to use js try this xample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
</head>
<body>
<div class="m-3">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
Section A
</li>
<li class="nav-item">
Section B
</li>
<li class="nav-item">
Section C
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h3>Section A</h3>
<p>Aliquip placeat salvia cillum iphone...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>Nullam hendrerit justo non leo aliquet...</p>
</div>
</div>
</div>
</body>
</html>
Here is example how to use BS-5.1 nav pills with saving active pill id to Window.localStorage:
BTW, in Code Snippet localStorage doesn't work, so I've created example in CodePen:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
const pillsTab = document.querySelector('#pills-tab');
const pills = pillsTab.querySelectorAll('button[data-bs-toggle="pill"]');
pills.forEach(pill => {
pill.addEventListener('shown.bs.tab', (event) => {
const { target } = event;
const { id: targetId } = target;
savePillId(targetId);
});
});
const savePillId = (selector) => {
localStorage.setItem('activePillId', selector);
};
const getPillId = () => {
const activePillId = localStorage.getItem('activePillId');
// if local storage item is null, show default tab
if (!activePillId) return;
// call 'show' function
const someTabTriggerEl = document.querySelector(`#${activePillId}`)
const tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();
};
// get pill id on load
getPillId();
I'm a beginner using Bootstrap. I've searched a lot of related problems but didn't find useful solution. Here is part of my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
What I want to do is: when click "FAQs", it can not only show the content of faqs, but also navigate to "FAQs" on the navigation bar, but now it is still under the "About" bar.
You can use the method show.bs.tab, described in the Official Documentation.
Basically, you listen to the newly-active just-shown tab, you get its id and highlight the corresponding element inside the nav.
Here's the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
$('nav').find('li.active').removeClass('active');
$('nav').find('a[href="#'+$('.tab-pane.active').attr('id')+'"]').parent('li').addClass('active');
});
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
Link to a working Codepen.
Using Django Framework, Bootstrap v4.5.2.
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
<script type="text/javascript">
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
</script>
I tried all the javascript seeing stackoverflow others answer but this does not work for me
How can I solve this to work perfectly?
If anything is a mistake on my code or you want to give me some suggestions, then reply to me.
Please try this,
You can add e.preventDefault(); in click() event.
base.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Then add in Bootstrap Pills Tab's html instead of adding CDN.
{% extends "base.html" %}
$('.btnNext').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:
Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
div.card {
max-height: 50%;
min-height: 30%;
}
.wuformheader {
color: white;
padding-bottom: 0px;
background-color: blue;
}
ul.nav-tabs {
border-bottom: 0px;
}
div.card-header li.nav-item> a.active {
color: black;
background-color: white;
}
div.card-header li.nav-item> a {
color: white;
}
</style>
<title>Review Template</title>
</head>
<body>
<div class="card">
<div class="card-header wuformheader">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="nav-formTabContent">
<div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
Study Tab!
</div>
<div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
Department Tab!
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
Contacts Tab!
</div>
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
Labs!
</div>
<div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
formapprovals!
</div>
</div>
</div>
</div>
<br/>
<div class="card">
<div="card-header wuformheader">
<ul class="nav nav-tabs" id="review-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
</li>
</ul>
</div>
<div="card-body">
<div class="tab-content" id="nav-reviewTabContent">
<div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
Notes tab
</div>
<div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
Criteria Tab
</div>
<div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
Approvals
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
What needs to change for both cards to have the correct (Top in the image) styling?
You have a typo in your html on line 83 in your jsfiddle:
<div="card-header wuformheader">
It should be:
<div class="card-header wuformheader">
You deleted the word "class"