Bootstrap 5 Accordion Button Center Align and Line break

user_15088874 0
Viewed 2321

I have 3 questions on this code I am using from bootstrap 5.

JSFiddle

  1. How do I align the header to the center of the button?

     <button class="accordion-button collapsed text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 <h2>ABC</h2><br /><p>Date Time</p>
 </button>

I tried inserting text-center to accordion-header and accordion-button but still, it is not aligned.

  1. How do I remove the arrow on the right?

I inspected the element and realized that it is in :: after which could not be seen in the HTML code. I like to check if I can move this by doing some CSS tweak?

  1. Any idea how i can introducce a line break bewtween the <h2>ABC</h2>and the <p>Date Time</p>? i tried adding <br /> but still doesnt separate them.

I have seen some examples for bootstrap 4 and it works to an extent but in bootstrap 5, certain classes changed the name and it is way more stubborn.

Thanks in advance.

twitter-bootstrap css html
2 Answers
user_139103680

I think this will do what you want:

class: d-block text-center

<button 
  class="accordion-button d-block text-center" 
  type="button" 
  data-bs-toggle="collapse" 
  data-bs-target="#collapseOne" 
  aria-expanded="true" 
  aria-controls="collapseOne"
>
  Testimonials
</button>
user_162949150
Related