I am working towards achieving a full-page span for the nav-tabs so that the bottom line touches the end of the page. In addition, I want the checkboxes positioned above this section to align with the tab links. Here is what I have accomplished so far:
<div class="float-right">
<form class="form-inline">
<label class="custom-control custom-checkbox">
<input type="checkbox" checked="checked" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Show all</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
Show some
</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
Show others
</span>
</label>
</form>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Next</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Best</a>
</li>
</ul>https://jsfiddle.net/jf7jp30g/
I've been experimenting with z-index in an attempt to solve the issue, but I'm struggling to make progress. Any assistance on this matter would be greatly appreciated!