Currently, I am utilizing Bootstrap 4 and are in need of developing a list-group featuring a title as well as an arrow positioned on the right side.
This is what I currently have:
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h3 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Title 1
</button>
</h3>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Content here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Title 2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Content here
</div>
</div>
</div>
</div>
However, my requirement is more akin to this: