Issue
I have 3 questions on this code I am using from bootstrap 5.
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.
- 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?
- 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.
Solution
just add this code in your css , hope this help for you
.accordion-button{
display:block;
}
JsFiddle:
https://jsfiddle.net/gw8yns17/
Answered By - M123
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.