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>
Related
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>
I am using Bootstrap 4.6
I am creating a page that consists of vertical pills and horizontal tabs. I have managed to get the vertical pills and horizontal tabs to display, but there is an issue with the horizontal tabs - in that the styling doesn't change when a tab is selected.
Here is my HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<style type="text/css">
/*<![CDATA[*/
/* temp */
.profile-posts .navbar {
background-color: grey;
min-height: 60px;
}
.profile-posts .navbar-default .navbar-text {
color: #ffffff;
}
.profile-posts .nav-tabs > li.active > a, .profile-posts .nav-tabs > .profile-posts li.active > a:focus, .profile-posts .nav-tabs > li.active > a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: rgb(221, 221, 221);
border-bottom-color: transparent;
}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div class="profile-posts tab">
<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-home-tab" data-toggle="pill" href=
"#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"
name="v-pills-home-tab">Foo</a>
<a class="nav-link" id="v-pills-profile-tab"
data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls=
"v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href=
"#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected=
"false" name="v-pills-messages-tab">FooBar</a>
<a class="nav-link" id=
"v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false" name=
"v-pills-settings-tab">FoofooBar</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-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul><!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">
Menu 1 items
</div>
<div id="second" class="tab-pane">
Menu 2 items
</div>
<div id="third" class="tab-pane">
Menu 3 items
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
aria-labelledby="v-pills-profile-tab">
Bar
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
aria-labelledby="v-pills-messages-tab">
FooBar
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
aria-labelledby="v-pills-settings-tab">
FoofooBar
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How do I fix the HTMl so that the selected tab is highlighted correctly (also, currently, the spacing between the tabs is a bit "off" - I suspect, this is a CSS styling issue).
Add This Class for nav-tabs > a tag nav-link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<style type="text/css">
/*<![CDATA[*/
/* temp */
.profile-posts .navbar {
background-color: grey;
min-height: 60px;
}
.profile-posts .navbar-default .navbar-text {
color: #ffffff;
}
.profile-posts .nav-tabs > li.active > a, .profile-posts .nav-tabs > .profile-posts li.active > a:focus, .profile-posts .nav-tabs > li.active > a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: rgb(221, 221, 221);
border-bottom-color: transparent;
}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div class="profile-posts tab">
<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-home-tab" data-toggle="pill" href=
"#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"
name="v-pills-home-tab">Foo</a>
<a class="nav-link" id="v-pills-profile-tab"
data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls=
"v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href=
"#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected=
"false" name="v-pills-messages-tab">FooBar</a>
<a class="nav-link" id=
"v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false" name=
"v-pills-settings-tab">FoofooBar</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-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a class="nav-link active" href="#first" data-toggle="tab">Menu 1</a></li>
<li><a class="nav-link" href="#second" data-toggle="tab">Menu 2</a></li>
<li><a class="nav-link" href="#third" data-toggle="tab">Menu 3</a></li>
</ul><!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">
Menu 1 items
</div>
<div id="second" class="tab-pane">
Menu 2 items
</div>
<div id="third" class="tab-pane">
Menu 3 items
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
aria-labelledby="v-pills-profile-tab">
Bar
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
aria-labelledby="v-pills-messages-tab">
FooBar
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
aria-labelledby="v-pills-settings-tab">
FoofooBar
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to align multiple divs with a width relative to the screen size.
However when I try to float them next to each other they jump to the right under each other. I have tried to put a display: inline-block; and float: left; a to the divs, but that doesn't seem to work either.
What I'm trying to achieve
What is happening
#navbarselector {
float: left;
width: 75%;
height: 8%;
z-index: 1;
background-color: #B4ADA5;
}
#ButtonOpt {
float: left;
width: 23%;
height: 8%;
margin-left: 2%;
z-index: 3;
background-color: #B4ADA5;
}
#view-2,
#view-1,
#view-interieur-2,
#view-interieur-1,
#view-begane-grond,
#view-eerste-verdieping,
#view-tweede-verdieping,
#view-derde-verdieping {
float: left;
width: 75%;
height: 540px;
z-index: 2;
padding-top: 30px;
}
#tabs-1,
#tabs-2,
#tabs-3,
#tabs-4,
#tabs-5,
#tabs-6,
#tabs-7,
#tabs-8 {
float: left;
width: 75%;
height: 540px;
border: 1px;
z-index: 2;
background-color:
}
#cmcVGVL,
#cmcAGVL,
#cmcIVGVL,
#cmcIAGVL,
#cmcBG,
#cmcV1,
#cmcV2,
#cmcV3 {
float: left;
width: 25%;
height: 535px;
z-index: 1;
margin-left: 1%;
background-color: #ab9882;
padding-top: 30px;
}
<div class="container">
<div class="nav nav-tabs" id="navbarselector" role="tablist">
<a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-1" role="tab" aria-controls="nav-home" aria-selected="true">2</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-2" role="tab" aria-controls="nav-1" aria-selected="false">1</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-3" role="tab" aria-controls="nav-1" aria-selected="false">Interieur 2</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-4" role="tab" aria-controls="nav-1" aria-selected="false">Interieur 1</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-5" role="tab" aria-controls="nav-1" aria-selected="false">Begane grond</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-6" role="tab" aria-controls="nav-1" aria-selected="false">Eerste verdieping</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-7" role="tab" aria-controls="nav-1" aria-selected="false">Tweede verdieping</a>
<a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-8" role="tab" aria-controls="nav-1" aria-selected="false">Derde verdieping</a>
</div>
<div id="ButtonOpt">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Geselecteerde opties ▼</button>
<div id="myDropdown" class="dropdown-menu"></div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<div class="tab-pane" id="view-2"></div>
<div class="tab-pane" id="cmcVGVL"></div>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<div class="tab-pane" id="view-1"></div>
<div class="tab-pane" id="cmcAGVL"></div>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<div class="tab-pane" id="view-interieur-2"></div>
<div class="tab-pane" id="cmcIVGVL"></div>
</div>
<div class="tab-pane" id="tabs-4" role="tabpanel">
<div class="tab-pane" id="view-interieur-1"></div>
<div class="tab-pane" id="cmcIAGVL"></div>
</div>
<div class="tab-pane" id="tabs-5" role="tabpanel">
<div class="tab-pane" id="view-begane-grond"></div>
<div class="tab-pane" id="cmcBG"></div>
</div>
<div class="tab-pane" id="tabs-6" role="tabpanel">
<div class="tab-pane" id="view-eerste-verdieping"></div>
<div class="tab-pane" id="cmcV1"></div>
</div>
<div class="tab-pane" id="tabs-7" role="tabpanel">
<div class="tab-pane" id="view-tweede-verdieping"></div>
<div class="tab-pane" id="cmcV2"></div>
</div>
<div class="tab-pane" id="tabs-8" role="tabpanel">
<div class="tab-pane" id="view-derde-verdieping"></div>
<div class="tab-pane" id="cmcV3"></div>
</div>
</div>
</div>
</div>
I think you are looking for css grid implementation. Try this. You will be up and running in no time.
https://learncssgrid.com/
// HTML
<div class='container'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
// CSS
.container{
display: grid;
grid-template-column: 70% 30%;
}
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>
http://jsfiddle.net/r9dunwzs/1/
<ul id="myTab" class="nav nav-tabs">
<li class="active">one</li>
<li>
<a href="#profile" data-toggle="tab">
<i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
</a>
</li>
</ul>
As you can see in jsFiddle, I'm having problems to increase the font size of an icon within a tab in bootstrap 3.
The expected behaviour is the following:
but when I increase the font-size my tabs get deformed:
How can I increase the glyph-icon size without deforming my tabs ?
Add a class to the a href of the icon and set a new line-height to the icon
HTML
<div class="bs-docs-example">
<ul id="myTab" class="nav nav-tabs">
<li class="active">one</li>
<li>
<a href="#profile" data-toggle="tab" class="bicon">
<i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
1
</div>
<div class="tab-pane fade" id="profile">
2
</div>
</div>
</div>
CSS
a.bicon{ padding: 0px 6px !important;
}
a.bicon i{ line-height: 1.45em !important;
}
DEMO HERE