I'm struggling to center align the text inside the accordion button while keeping the arrow on the right side
Here is an example of what I'm trying to achieve:
https://i.sstatic.net/2brrY.png
In the Bootstrap 5 documentation, there's an example where I've indicated that I want the alignment to be modified.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
// Trying to center align Accordion Item #1 instead of having it on the left
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
I have tried
.accordion-button{
display:block;
}
as well as
class="accordion-button d-block text-center" However, both solutions mentioned above remove the arrow on the right of the accordion. Any assistance would be greatly appreciated!