I'm struggling to adjust the position of the plus-minus icon on a Bootstrap accordion to the far right, but my current code isn't producing the desired result.
Here's the CSS snippet:
.mb-0 > a:before {
float: right !important;
font-family: FontAwesome;
content:"\f068";
padding-right: 5px;
}
.mb-0 > a.collapsed:before {
float: right !important;
content:"\f067";
}
.mb-0 > a:hover,
.mb-0 > a:active,
.mb-0 > a:focus {
text-decoration:none;
}
And here is the corresponding HTML section:
<div class="accordion" id="accordionExample" style="margin-top: 3%;">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
1. Human Growth and development
</a>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
</div>
</div>
</div>
I am aiming for a design similar to this example: JSfiddle