Bootstrap: Accordion card header text doesn't wrap

[zachattack05]

Following the example provided in the documentation I noticed that when text in the card header is long, the text doesn't wrap, but instead runs off of the card and out of view.

I am able to get it to wrap by removing the "btn" reference from the button's class attributes, but if I do that the styling is completely off.

I have created an example here: https://jsbin.com/felexizalu/edit?html,output

Operating System: Windows 10 Pro V. 1803
Browser: Chrome (latest). Also Microsoft Edge.

-- I don't typically use Github, so I apologize if this is the wrong place to report this issue or if I have missed something obvious. --

[mzparulina]

Hi, is this the one you want to achieve? https://jsbin.com/winuhekise/edit?html,output

[zachattack05]

Yes, that's how I would expect text to wrap, but by removing all of the markup around the text, the accordion doesn't work.

On my example, once you click the "Click Me" text, then you can also click the longer text and it displays an accordion style drop down.

See below:

[mzparulina]

I wrap the button with another div and override the whitespace styling.
https://jsbin.com/holudi/edit?html,output

[mdo]

Duplicate of #26954.

[essiele]

I wrap the button with another div and override the whitespace styling.
https://jsbin.com/holudi/edit?html,output

Worked for me. Suprised it hasn't been _officially_ fixed yet, though...