Here is the relevant code snippet that I am working with:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-lg-10">
<div class="tab-content">
<div id="AAA" class="tab-pane fade in active">
<h2>AAA</h2>
<p>
Lorem ipsum dolor
</p>
</div>
<div id="BBB" class="tab-pane fade in">
<h2>BBB</h2>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
</div>
<div class="col-lg-2 sidenav" dir="rtl">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#AAA" data-toggle="tab" class="list-group-item">AAA</a></li>
<li><a href="#BBB" data-toggle="tab" class="list-group-item">BBB</a></li>
</ul>
</div>
</div>
</div>
</body>I was able to achieve a layout where the pills are aligned vertically on the left side: pills stuck to the left. However, my desired outcome is for them to be aligned to the right, like this (as illustrated in mspaint): pills on the right.
I have tried numerous alignment options without success. Any guidance on how to achieve the desired layout would be greatly appreciated! Thank you!