I am working with bootstrap tabs that are aligned to the right within my container:
https://jsfiddle.net/yc2dxnev/
Here is the code snippet:
<div class=container>
<ul id="tabs" class="tabs-right tabs">
<li class="banana active"><a>Banana</a></li>
<li class="monkey"><a>Monkey</a></li>
<li class="woods"><a>Woods</a></li>
</ul>
</div>
<style>
ul.tabs a {
display: block;
outline: none;
}
ul.tabs {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
ul.tabs>li {
display: inline-block;
position: relative;
margin-top: 5px;
margin-bottom: -1px;
}
My goal is to keep the tabs aligned right and have only the left tab stick to the left, while filling the space up to the next tab. I've included an image for reference:
If you have any suggestions or tricks on how to achieve this, please let me know.