In my navigation tab section, I want to display different images for each category. However, when the fiddle is resized to a smaller size, there is a large white space where the images overlap. I'm not sure how to fix this issue. Removing the height-100 property seems like a solution, but I still want to maintain a certain height for aesthetic reasons.
Here's a snippet of the HTML code:
<div class="container-fluid bg-dark h-100">
<div class="row">
<div class="col-md-8">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab1" role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab2" role="tab">tab2</a>
</li>
...
</ul>
<div class="tab-content text-white">
<div class="tab-pane fade in" id="tab1" role="tabpanel">
<div class="row py-2 h-100">
...
</div>
<div class="row py-2 h-100">
...
</div>
<div class="row py-2 h-100">
...
</div>
</div>
<div class="tab-pane fade in" id="tab2" role="tabpanel">
x
</div>
... // repeat for other tabs
</div>
</div>
<div class="col-md-4 control">
<div class="container-fluid">
some content here
</div>
</div>
</div>
</div>
CSS:
html, body {
box-sizing: border-box;
height: 100%;
margin: 0;
}
.control{
background-color:#24262D;
}
JSFiddle (With B4 and CSS): https://jsfiddle.net/yeg1dsut/9/
Thank you!