I would like to place a text area within the tab and stretch it horizontally and vertically within the card body.
However, using d-flex and align-self-stretch does not seem to work on the tab content div.
Here is what I have tried. I used bootstrap5 to place tabs with text areas inside cards.
I added a d-flex flex-column class to the card-body.
I added d-flex align-self-stretch to the tab content <div class="tab-content">
I have set display: flex from css, since there seems to be no flex in the div attribute.
However, the tab content does not fill the extra space in the card.
Is there any solution to this problem?
Thank you.
Here is a simple code that reproduces the problem.
https://codepen.io/sankai0044/pen/abEXaoJ
Here is the code.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#MyTextarea{
resize: none;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="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
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex align-self-stretch" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>
You don't need the .align-self-stretch class. You are running into problems with the original Bootstrap CSS for .card. To fix that you have to add the BS class .flex-grow-1 to your tab-content div.
Moreover, you have to make sure that your #myTextarea is set to height: 100%.
I hope this creates the effect you were looking for.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#MyTextarea{
resize: none;
height: 100%;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="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
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex flex-grow-1" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>
Add flex-basis: 100%; to your #myTabContent. Next, just simply add h-100 or (height: 100%;) as a class on your textarea element.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#myTabContent {
flex-basis: 100%;
}
#MyTextarea{
resize: none;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="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
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex align-self-stretch" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control h-100" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>
Related
my first time, be patient pls.
I want to highlight the selected nav-link, it works well but the first one (small), doesn't highlight.
Even when i select the other ones, (medium or large, that do change the color), and select the first one (small) again, small won't change its color.
and its also just black at the beginning.
here my code , I am using vue and bootstrap is installed
<template>
<div >
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button
class="nav-link car-head active"
id="nav-ssprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-ssprinter"
type="button"
role="tab"
aria-controls="nav-ssprinter"
aria-selected="true"
>Small
</button>
<button
class="nav-link car-head"
id="nav-msprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-msprinter"
type="button"
role="tab"
aria-controls="nav-msprinter"
aria-selected="false"
>
Middle
</button>
<button
class="nav-link car-head"
id="nav-xlsprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-xlsprinter"
type="button"
role="tab"
aria-controls="nav-xlsprinter"
aria-selected="false"
>
big
</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="nav-ssprinter"
role="tabpanel"
aria-labelledby="nav-ssprinter-tab"
tabindex="0"
>
Small text
</div>
<div
class="tab-pane fade"
id="nav-msprinter"
role="tabpanel"
aria-labelledby="nav-msprinter-tab"
tabindex="0"
>
medium text
</div>
<div
class="tab-pane fade"
id="nav-xlsprinter"
role="tabpanel"
aria-labelledby="nav-xlsprinter-tab"
tabindex="0"
>
big text
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
methods: {},
};
</script>
<style>
.car-head{
color: black !important;
font-weight: bold !important;
}
.car-head + .active {
color: rgb(243, 158, 0) !important;
background: rgb(220, 220, 220) !important;
}
</style>
i have checked the id's and classes and changed the order in the css part at the bottom,
it helped at a different problem don't didn't solved this one.
i hoped to find a mistyping in class names for the small nav-link, because, I see no other reason that it's color is always black, at the beginning (default selected) and when I select It after selecting something else.
You are using the + selector, which means: select the adjacent next sibling. So this will only work in certain scenarios.
In your example I suppose you want style the car-head class when it has the active class. In that case you will need to use this selector combination: .car-head.active
Read up on CSS selectors here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Or in a great video explanation:
https://www.youtube.com/watch?v=l1mER1bV0N0
.car-head {
color: black !important;
font-weight: bold !important;
}
.car-head.active {
color: rgb(243, 158, 0) !important;
background: rgb(220, 220, 220) !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link car-head active" id="nav-ssprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-ssprinter" type="button" role="tab" aria-controls="nav-ssprinter" aria-selected="true">Small
</button>
<button class="nav-link car-head" id="nav-msprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-msprinter" type="button" role="tab" aria-controls="nav-msprinter" aria-selected="false">
Middle
</button>
<button class="nav-link car-head" id="nav-xlsprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-xlsprinter" type="button" role="tab" aria-controls="nav-xlsprinter" aria-selected="false">
big
</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-ssprinter" role="tabpanel" aria-labelledby="nav-ssprinter-tab" tabindex="0">
Small text
</div>
<div class="tab-pane fade" id="nav-msprinter" role="tabpanel" aria-labelledby="nav-msprinter-tab" tabindex="0">
medium text
</div>
<div class="tab-pane fade" id="nav-xlsprinter" role="tabpanel" aria-labelledby="nav-xlsprinter-tab" tabindex="0">
big text
</div>
</div>
</div>
use anchor tag and :visited instead of button
example :
.car-head:visited{
background-color : blue;
}
I am using bootstrap navigation tabs in my page, I want to change the background color and text color of the active tab.Following is the HTML code for the tabs
<div class="tab-content">
<div class="os-tabs-controls">
<ul class="nav nav-pills text-upper pl-2 pr-2">
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#leavelist" aria-expanded="true">
LeaveList
</a>
</li>
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#procurementlist" aria-expanded="false">
Procurement List
</a>
</li>
</ul>
</div>
</div>
My CSS is as follows
<Style>
.nav-item a:active{
color: white;
background-color: red;
}
</Style>
The above code is working fine when i clicks on tab but immediately it changes back to the default color styling.
Kindly anybody look into the issue and help me to get it working.
Its working now, actually i overwrite the default styling with my custom styling
by adding following css
<style>
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #F0F8FF;
background-color: #CD0B0B;
}
</style>
You could do it with jQuery:
$('.nav-item a').click(function(e) {
$('.nav-item a').removeClass('current_page_item');
$(this).addClass('current_page_item');
});
CSS:
.current_page_item {
background-color: red;
color: white;
}
JSFiddle here: Link
It's simple, add class at the referring link on the page
.active{
color: white;
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="tab-content">
<div class="os-tabs-controls">
<ul class="nav nav-pills text-upper pl-2 pr-2">
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#leavelist" aria-expanded="true">
LeaveList
</a>
</li>
<li class="nav-item tabs p-2">
<a class="nav-link active" data-toggle="tab" href="#procurementlist" aria-expanded="false">
Procurement List
</a>
</li>
</ul>
</div>
</div>
If you want same effect on hover you can simple add it on nav-link class.
For one page website:
$('body').scrollspy({
target: '#myNavbar',
offset: 50
});
.navbar-nav li>a:hover,.navbar-nav li>a:focus,.navbar-nav li.active {
color: white;
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="tab-content">
<div class="os-tabs-controls">
<ul class="nav nav-pills text-upper pl-2 pr-2">
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#leavelist" aria-expanded="true">
LeaveList
</a>
</li>
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#procurementlist" aria-expanded="false">
Procurement List
</a>
</li>
</ul>
</div>
</div>
<div id="leavelist">Section One</div>
<div id="procurementlist">Section Two</div>
I am using Bootstrap 4, and I'm having a tough time with this. On this page wyckofftwosmartcookies.com the recipe section has three tabs, then a vertical navigation that selects between cookie types.
The first one displays correct then when you switch cookies instead of fading the first remains and the next selection appears underneath. I spent the last three hours looking at this and am missing something obvious. Any help or suggestions where to look would be greatly appreciated. Need to get this done for my daughters project =)
body{max-width:1440px;margin:auto;background-color:#f6f6f6}
#mobile-recipies{display:none}
#recipie-selector-desktop{display:none}
#mobile-selector{display: block}
.mor img {width:40%}
.hero-background{background-image:url("2 smart cookies hero desktop.jpg");background-repeat: no-repeat;height:500px}
.hero-headline{font-family:'Permanent Marker';color:#000111;font-size:36px}
.cookiefont-white{font-family:'Cookie',cursive ;font-size:1.5em;padding:24 0 0px;color:#666;font-weight:400}
.bg-drkgreen {background-color:#166937}
.bg-black{background-color:#232020}
.bg-orange{background-color:#F7941D}
.bg-blue{background-color:#3A71B8}
.font-white{color:#fff}
.section-lead-copy{font-family:'pacifico';font-size:24px;color:#888888;text-align: center}
.menu-item-font-white{font-family:'Cookie';font-size:20px;color:#666666;text-align: center}
.description-header{font-family:'Cookie';font-size:22px ;font-weight:600;color:#FFFFFF;text-align: center}
.spacer{padding-top:65px; padding-bottom:45px}
.spacer-b{padding-top:35px; padding-bottom:5px}
.spacer-c{padding-top:15px; padding-bottom:5px}
.spacer-d{padding-top:10px}
img.center {display: block;margin: 0 auto}
/* recipie box */
#mobile-recipies .btn-link {color:#000000}
#recipie-desktop a{color:#000000}
#recipie-desktop .nav-link.active {background-color:#000000;color:#FFFFFF;font-family:'pacifico'}
#recipie-desktop ul{padding-left: 3px}
.mb-0{font-family:'pacifico';color:#000}
.card-header{background-color:#ffffff}
.border-box{width:100%; border:dotted medium #000;border-radius: 5px;max-height: 700px}
.recipie-headline{font-family: 'pacifico';font-weight:400;font-size:30px;color:#000}
.recipie-subheadline{font-family:'roboto';font-size:14px;color:#999}
/* Ecommerce Styling */
.rep-product-Headline{font-family:'roboto';font-height:18px;color:#000000}
.rep-product-description{font-family:'roboto';font-size:16px;color:#888}
.rep-product-price{font-family:'Permanent Marker';font-size:45px}
.rep-image-box{width:50px;height:75px}
.ecomm-format button{background-color:#f6f6f6;font-family:'roboto';color:#000;width:200px;border:1px solid #000;font-size:24px;font-weight:bold}
.ecomm-format img {width:250px;height:275px}
#media (max-width: 995px){
#recipie-selector-desktop{display:none}
#mobile-selector{display: block}
.mor img {width:40%}
#ecomm-format img{width:200px; height:225px}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recipie-desktop">
<div class ="container-fluid">
<div class = "border-box">
<div class ="recipie-headline"> Four Awesome Cookie Mixes </div>
<hr>
<div class ="spacer-c"></div>
<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-sfcatc-tab" data-toggle="pill" href="#v-pills-sfcatc" role="tab" aria-controls="v-pills-sfcatc-tab" aria-selected="true">Santa's Favorite Cookies</a>
<a class="nav-link" id="v-pills-wsc-tab" data-toggle="pill" href="#v-pills-wsc" role="tab" aria-controls="v-pills-wsc-tab" aria-selected="false">Wintry Sugar Cookies</a>
<a class="nav-link" id="v-pills-rc-tab" data-toggle="pill" href="#v-pills-rc" role="tab" aria-controls="v-pills-rc-tab" aria-selected="false">Reindeer Cookies</a>
<a class="nav-link" id="v-pills-ccoc-tab" data-toggle="pill" href="#v-pills-ccoc" role="tab" aria-controls="v-pills-ccoc-tab" aria-selected="false">Chocolate Chip & Oatmeal Cookies</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-sfcatc" role="tabpanel" aria-labelledby="v-pills-sfcatc-tab">
<div hidden id="snipcart" data-api-key="NmM2YTU4NzUtZGUwZS00OTAwLWFiZTEtNDQ2ZmE5ZTQwMDEzNjM2ODY4NTk3OTAxMjYwMDA5"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-sfcatc-tab" data-toggle="tab" href="#nav-sfcatc" role="tab" aria-controls="nav-sfcatc-tab" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-sfcd-tab" data-toggle="tab" href="#nav-sfcd" role="tab" aria-controls="nav-sfcd-tab" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-sfcv-tab" data-toggle="tab" href="#nav-sfcv" role="tab" aria-controls="nav-sfcv-tab" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-sfcatc" role="tabpanel" aria-labelledby="nav-sfcatc-tab">
<div class = "row">
<div class ="col-5" >
<div class ="spacer-c"></div>
<div class="ecomm-format"><img src="sfcjar.png"></div>
</div>
<div class ="col-4">
<div class ="spacer-c"></div>
<div class ="rep-product-Headline">Holiday M&M Cookie Mix in a decorative 16oz Jar</div>
<div class ="rep-product-price">$11.99</div>
<div class ="spacer-d"></div>
<div class ="ecomm-format">
<button class="snipcart-add-item" data-item-id="Santa's Favorite Cookies" data-item-price="11.99" data-item-url="/product/Santas-favorite-cookie-jar" data-item-description="M&M Cookie Mix"data-item-image="sfcjar.png" data-item-name="Santa's Favorite M&M Cookie">Order Now</button></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcd" role="tabpanel" aria-labelledby="nav-sfcd-tab">
<div class ="row">
<div class ="col-4">
<br>
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>¾ cup( 1 and ½ sticks) unsalted butter,softened</li>
<li>1 large egg</li>
<li>½ tablespoon vanilla extract</li>
</ul>
</div>
<div class ="col-6">
<br>
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 350 degrees F. </li>
<li>Beat butter, egg, and vanilla extract in large mixing bowl until blended. </li>
<li>Add mason jar mix and mix well. </li>
<li>Drop by rounded tablespoon onto parchment paper lined baking sheet. </li>
<li>Bake for 9 to 11 minutes or until lightly golden brown. </li>
<li>Cool on baking sheets for 2 minutes before moving to cooling rack. </li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcv" role="tabpanel" aria-labelledby="nav-sfcv-tab">video</div>
</div>
</div></div>
<div class="tab-pane fade" id="v-pills-wsc" role="tabpanel" aria-labelledby="v-pills-wsc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-wscatc-tab" data-toggle="tab" href="#nav-wscatc" role="tab" aria-controls="nav-wscatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-wscd-tab" data-toggle="tab" href="#nav-wscd" role="tab" aria-controls="nav-wscd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-wscv-tab" data-toggle="tab" href="#nav-wscv" role="tab" aria-controls="nav-wscv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show " id="nav-wscatc" role="tabpanel" aria-labelledby="nav-wscatc-tab">wsc atc</div>
<div class="tab-pane fade" id="nav-wscd" role="tabpanel" aria-labelledby="nav-wscd-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup unsalted butter(softened)</li>
<li>1 egg, room temperature</li>
<li>½ teaspoon vanilla extract</li>
<li>½ cup sour cream</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
</li>
<li>Mix all ingredients together and roll out to ¼ inch thickness on lightly floured surface.</li>
<li>Chill dough for about an hour before using cookie cutters to shape. Add sprinkles if desired.</li>
<li>Bake at 350 degrees for 10 to 12 minutes(do not overbake)</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-wscv" role="tabpanel" aria-labelledby="nav-wscv-tab">Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-rc" role="tabpanel" aria-labelledby="v-pills-rc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-rcatc-tab" data-toggle="tab" href="#nav-rcatc" role="tab" aria-controls="nav-rcatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-rcdir-tab" data-toggle="tab" href="#nav-rcdir" role="tab" aria-controls="nav-rcdir" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-rcvid-tab" data-toggle="tab" href="#nav-rcvid" role="tab" aria-controls="nav-rcvid" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-rc" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-rcatc" role="tabpanel" aria-labelledby="nav-rcatc-tab">ATC</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-rcdir-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup softened butter</li>
<li>1 egg </li>
<li>1 teaspoon vanilla</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Dump jar in a large mixing bowl</li>
<li>add ½ cup softened butter</li>
<li>add 1 egg</li><li>add 1 teaspoon vanilla.</li>
<li>Mix well and drop onto a cookie sheet lined with parchment paper. </li>
<li>Bake at 375 degrees for 8 to 10 minutes</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-rcvid-tab">RC Video</div>
</div> </div>
<div class="tab-pane fade" id="v-pills-ccoc" role="tabpanel" aria-labelledby="v-pills-ccoc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-ccocatc-tab" data-toggle="tab" href="#nav-ccocatc" role="tab" aria-controls="nav-ccocatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-ccocd-tab" data-toggle="tab" href="#nav-ccocd" role="tab" aria-controls="nav-ccocd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-ccocv-tab" data-toggle="tab" href="#nav-ccocv" role="tab" aria-controls="nav-ccocv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-ccocatc" role="tabpanel" aria-labelledby="nav-ccocatc-tab">atc ccoc</div>
<div class="tab-pane fade" id="nav-ccocd" role="tabpanel" aria-labelledby="nav-ccocd-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>1 egg, slightly beaten</li>
<li>1 teaspoon vanilla extract</li>
<li>1 stick butter, softened</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 375 degrees.</li>
<li>Empty jar contents into a large mixing bowl</li>
<li>Add the egg</li>, <li>Add the vanilla</li>
<li> Add the butter and mix well</li>
<li>Drop by spoonfuls onto an ungreased cookie sheet about 2 inches apart</li>
<li>Bake for 8 to 10 minutes or until the edges are golden brown</li>
<li>Remove to a wire rack and let cool</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-ccocv" role="tabpanel" aria-labelledby="nav-ccocv-tab">ccoc v</div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
There is a problem in your HTML code.
In this div tab-content you haven't added all your tab-pane divs.
Hope this will help you.
body {
max-width: 1440px;
margin: auto;
background-color: #f6f6f6
}
#mobile-recipies {
display: none
}
#recipie-selector-desktop {
display: none
}
#mobile-selector {
display: block
}
.mor img {
width: 40%
}
.hero-background {
background-image: url("2 smart cookies hero desktop.jpg");
background-repeat: no-repeat;
height: 500px
}
.hero-headline {
font-family: 'Permanent Marker';
color: #000111;
font-size: 36px
}
.cookiefont-white {
font-family: 'Cookie', cursive;
font-size: 1.5em;
padding: 24 0 0px;
color: #666;
font-weight: 400
}
.bg-drkgreen {
background-color: #166937
}
.bg-black {
background-color: #232020
}
.bg-orange {
background-color: #F7941D
}
.bg-blue {
background-color: #3A71B8
}
.font-white {
color: #fff
}
.section-lead-copy {
font-family: 'pacifico';
font-size: 24px;
color: #888888;
text-align: center
}
.menu-item-font-white {
font-family: 'Cookie';
font-size: 20px;
color: #666666;
text-align: center
}
.description-header {
font-family: 'Cookie';
font-size: 22px;
font-weight: 600;
color: #FFFFFF;
text-align: center
}
.spacer {
padding-top: 65px;
padding-bottom: 45px
}
.spacer-b {
padding-top: 35px;
padding-bottom: 5px
}
.spacer-c {
padding-top: 15px;
padding-bottom: 5px
}
.spacer-d {
padding-top: 10px
}
img.center {
display: block;
margin: 0 auto
}
/* recipie box */
#mobile-recipies .btn-link {
color: #000000
}
#recipie-desktop a {
color: #000000
}
#recipie-desktop .nav-link.active {
background-color: #000000;
color: #FFFFFF;
font-family: 'pacifico'
}
#recipie-desktop ul {
padding-left: 3px
}
.mb-0 {
font-family: 'pacifico';
color: #000
}
.card-header {
background-color: #ffffff
}
.border-box {
width: 100%;
border: dotted medium #000;
border-radius: 5px;
max-height: 700px
}
.recipie-headline {
font-family: 'pacifico';
font-weight: 400;
font-size: 30px;
color: #000
}
.recipie-subheadline {
font-family: 'roboto';
font-size: 14px;
color: #999
}
/* Ecommerce Styling */
.rep-product-Headline {
font-family: 'roboto';
font-height: 18px;
color: #000000
}
.rep-product-description {
font-family: 'roboto';
font-size: 16px;
color: #888
}
.rep-product-price {
font-family: 'Permanent Marker';
font-size: 45px
}
.rep-image-box {
width: 50px;
height: 75px
}
.ecomm-format button {
background-color: #f6f6f6;
font-family: 'roboto';
color: #000;
width: 200px;
border: 1px solid #000;
font-size: 24px;
font-weight: bold
}
.ecomm-format img {
width: 250px;
height: 275px
}
#media (max-width: 995px) {
#recipie-selector-desktop {
display: none
}
#mobile-selector {
display: block
}
.mor img {
width: 40%
}
#ecomm-format img {
width: 200px;
height: 225px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recipie-desktop">
<div class="container-fluid">
<div class="border-box">
<div class="recipie-headline"> Four Awesome Cookie Mixes </div>
<hr>
<div class="spacer-c"></div>
<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-sfcatc-tab" data-toggle="pill" href="#v-pills-sfcatc" role="tab" aria-controls="v-pills-sfcatc-tab" aria-selected="true">Santa's Favorite Cookies</a>
<a class="nav-link" id="v-pills-wsc-tab" data-toggle="pill" href="#v-pills-wsc" role="tab" aria-controls="v-pills-wsc-tab" aria-selected="false">Wintry Sugar Cookies</a>
<a class="nav-link" id="v-pills-rc-tab" data-toggle="pill" href="#v-pills-rc" role="tab" aria-controls="v-pills-rc-tab" aria-selected="false">Reindeer Cookies</a>
<a class="nav-link" id="v-pills-ccoc-tab" data-toggle="pill" href="#v-pills-ccoc" role="tab" aria-controls="v-pills-ccoc-tab" aria-selected="false">Chocolate Chip & Oatmeal Cookies</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-sfcatc" role="tabpanel" aria-labelledby="v-pills-sfcatc-tab">
<div hidden id="snipcart" data-api-key="NmM2YTU4NzUtZGUwZS00OTAwLWFiZTEtNDQ2ZmE5ZTQwMDEzNjM2ODY4NTk3OTAxMjYwMDA5"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-sfcatc-tab" data-toggle="tab" href="#nav-sfcatc" role="tab" aria-controls="nav-sfcatc-tab" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-sfcd-tab" data-toggle="tab" href="#nav-sfcd" role="tab" aria-controls="nav-sfcd-tab" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-sfcv-tab" data-toggle="tab" href="#nav-sfcv" role="tab" aria-controls="nav-sfcv-tab" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-sfcatc" role="tabpanel" aria-labelledby="nav-sfcatc-tab">
<div class="row">
<div class="col-5">
<div class="spacer-c"></div>
<div class="ecomm-format"><img src="sfcjar.png"></div>
</div>
<div class="col-4">
<div class="spacer-c"></div>
<div class="rep-product-Headline">Holiday M&M Cookie Mix in a decorative 16oz Jar</div>
<div class="rep-product-price">$11.99</div>
<div class="spacer-d"></div>
<div class="ecomm-format">
<button class="snipcart-add-item" data-item-id="Santa's Favorite Cookies" data-item-price="11.99" data-item-url="/product/Santas-favorite-cookie-jar" data-item-description="M&M Cookie Mix" data-item-image="sfcjar.png" data-item-name="Santa's Favorite M&M Cookie">Order Now</button></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcd" role="tabpanel" aria-labelledby="nav-sfcd-tab">
<div class="row">
<div class="col-4">
<br>
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>¾ cup( 1 and ½ sticks) unsalted butter,softened</li>
<li>1 large egg</li>
<li>½ tablespoon vanilla extract</li>
</ul>
</div>
<div class="col-6">
<br>
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 350 degrees F. </li>
<li>Beat butter, egg, and vanilla extract in large mixing bowl until blended. </li>
<li>Add mason jar mix and mix well. </li>
<li>Drop by rounded tablespoon onto parchment paper lined baking sheet. </li>
<li>Bake for 9 to 11 minutes or until lightly golden brown. </li>
<li>Cool on baking sheets for 2 minutes before moving to cooling rack. </li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcv" role="tabpanel" aria-labelledby="nav-sfcv-tab">video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-wsc" role="tabpanel" aria-labelledby="v-pills-wsc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-wscatc-tab" data-toggle="tab" href="#nav-wscatc" role="tab" aria-controls="nav-wscatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-wscd-tab" data-toggle="tab" href="#nav-wscd" role="tab" aria-controls="nav-wscd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-wscv-tab" data-toggle="tab" href="#nav-wscv" role="tab" aria-controls="nav-wscv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show " id="nav-wscatc" role="tabpanel" aria-labelledby="nav-wscatc-tab">wsc atc</div>
<div class="tab-pane fade" id="nav-wscd" role="tabpanel" aria-labelledby="nav-wscd-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup unsalted butter(softened)</li>
<li>1 egg, room temperature</li>
<li>½ teaspoon vanilla extract</li>
<li>½ cup sour cream</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Mix all ingredients together and roll out to ¼ inch thickness on lightly floured surface.</li>
<li>Chill dough for about an hour before using cookie cutters to shape. Add sprinkles if desired.</li>
<li>Bake at 350 degrees for 10 to 12 minutes(do not overbake)</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-wscv" role="tabpanel" aria-labelledby="nav-wscv-tab">Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-rc" role="tabpanel" aria-labelledby="v-pills-rc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-rcatc-tab" data-toggle="tab" href="#nav-rcatc" role="tab" aria-controls="nav-rcatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-rcdir-tab" data-toggle="tab" href="#nav-rcdir" role="tab" aria-controls="nav-rcdir" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-rcvid-tab" data-toggle="tab" href="#nav-rcvid" role="tab" aria-controls="nav-rcvid" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-rc" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-rcatc" role="tabpanel" aria-labelledby="nav-rcatc-tab">ATC</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-rcdir-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup softened butter</li>
<li>1 egg </li>
<li>1 teaspoon vanilla</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Dump jar in a large mixing bowl</li>
<li>add ½ cup softened butter</li>
<li>add 1 egg</li>
<li>add 1 teaspoon vanilla.</li>
<li>Mix well and drop onto a cookie sheet lined with parchment paper. </li>
<li>Bake at 375 degrees for 8 to 10 minutes</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-rcvid-tab">RC Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-ccoc" role="tabpanel" aria-labelledby="v-pills-ccoc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-ccocatc-tab" data-toggle="tab" href="#nav-ccocatc" role="tab" aria-controls="nav-ccocatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-ccocd-tab" data-toggle="tab" href="#nav-ccocd" role="tab" aria-controls="nav-ccocd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-ccocv-tab" data-toggle="tab" href="#nav-ccocv" role="tab" aria-controls="nav-ccocv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-ccocatc" role="tabpanel" aria-labelledby="nav-ccocatc-tab">atc ccoc</div>
<div class="tab-pane fade" id="nav-ccocd" role="tabpanel" aria-labelledby="nav-ccocd-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>1 egg, slightly beaten</li>
<li>1 teaspoon vanilla extract</li>
<li>1 stick butter, softened</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 375 degrees.</li>
<li>Empty jar contents into a large mixing bowl</li>
<li>Add the egg</li>,
<li>Add the vanilla</li>
<li> Add the butter and mix well</li>
<li>Drop by spoonfuls onto an ungreased cookie sheet about 2 inches apart</li>
<li>Bake for 8 to 10 minutes or until the edges are golden brown</li>
<li>Remove to a wire rack and let cool</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-ccocv" role="tabpanel" aria-labelledby="nav-ccocv-tab">ccoc v</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
Please look at a codepen for this:
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container position-relative">
<div class="pillwrapper">
<div class="rightpart d-flex justify-content-end">
<ul class="nav nav-pills" id="mypill">
<li class="nav-item">button</li>
<li class="nav-item">button</li>
<li class="nav-item">button</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade show active" id="content-1">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-3">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
</div>
</div>
</div>
</div>
I'm learning bootstrap4. I'm trying to realize a structure here with bootstrap NAV PILL: a tab system(but looks like buttons), you can switch tabs, under a tab there is a text content and a photo, only this photo will be shown in the left, looks like tabs system is right part, photo is left part. Problem is: 1, the first tab is active, when I click any other one, nothing happens. 2, why position-absolute does not work, photo still at right? 3, how to put text content under tabs, and horizontally align center the tab and content?
.rightpart{
border:2px solid red;
min-height:100vh;
}
.pillwrapper{
border:1px solid green;
min-height:100vh;
}
.container{
border:1px solid yellow;
min-height:100vh;
}
.content-photo{
width:200px;
left:0;
top:0;
}
Could anybody please help?
For Bootstrap 4, the 'tabs' are not actually tabbable until you include the JavaScript plugin to make the tabs work. The documentation for Bootstrap states this:
https://getbootstrap.com/docs/4.3/components/navs/#tabs
To see the tabs work, see this link from the Bootstrap documentation:
https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior
The above links show the tabs working with content associated with each tab. To have content 'under' each tab, you need to have tab-panes for the content for each tab. See this example from the Bootstrap documentation.
<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>
To center the tab navigation and content under each tab, you could use CSS like below for the tab navigation (from the above example HTML).
.nav {
display: block;
margin: 0 auto;
}
With this information, your HTML should look more like this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<ul class="nav">
<li class="nav-item">
Button 1
</li>
<li class="nav-item">
Button 2
</li>
<li class="nav-item">
Button 3
</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade" id="content-1">
<p>Content Here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
</div>
<div class="tab-pane fade" id="content-3">
</div>
</div>
</div>
</div>
<!--
Add Bootstrap JavaScript
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I'm having trouble getting tabs inside of a vertical pill tab panel to work correctly in Bootstrap 4.
Here's a minimal code example:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="popper.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<div class="row">
<div class="col-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" data-toggle="pill" href="#v-pills-1" role="tab">Pill 1</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-2" role="tab">Pill 2</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-3" role="tab">Pill 3</a>
</div>
</div>
<div class="col-10">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-1" role="tabpanel">
Pill 1 content
<!-- tabs
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active show" id="tabs-1" role="tabpanel">Tab 1 content</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">Tab 2 content</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">Tab 3 content</div>
</div>
-->
</div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel">Pill 2 content</div>
<div class="tab-pane fade" id="v-pills-3" role="tabpanel">Pill 3 content</div>
</div>
</div>
</div>
</body>
</html>
The webpage functions correctly, that is the vertical pills work as expected. Once you uncomment the section that gives the first vertical pill a nested tab, the pills do not function correctly. Clicking on Pill 2 and then Pill 3 will results in the content for both pills to be shown.
Why doesn't this work and how can I fix it?
This is a bug in version 4.0.0-beta. It is fixed in version 4.0.0-beta.2:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>