Accordion Btn-link center text sometimes.

[TheKLF99]

Just had an issue on a website where I had an FAQ in an accordion. It was found that on smaller phone screens some of the FAQs were center aligned where as others were left aligned.

Found that btn-link was applying CSS of text-align:center but the link was set to display inline - therefore the text would only center when the FAQ went across multiple lines but would normally be left aligned at other times - problem can be seen in attached image.

[MartijnCuppens]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

[TheKLF99]

A live demo of this is at the following website...

http://carers.axiam-pc.co.uk/join-us

if you look at the website full screen on a big enough monitor you get the following image.

However if you reduce the size of the screen down so that the words on the button start to wrap onto a second line then you get this effect...

(in the second image the button with the wrapped lines has been centred, where as the buttons without the wrapped lines are left aligned making the centered button look wrong).

Bootstrap version is v4.3.1 Browser is Chrome 78.0.3904.70 and OS is Windows 10, has also been tested on Apple iPad Safari and Android Chrome too with same result.

[MartijnCuppens]

Yeah, that's normal behaviour for inline elements. You can add .text-left to the buttons to align them to the left. Maybe also add .btn-block to increase the hit area of the buttons.

We should also update this in our docs, feel free to contribute!

[TheKLF99]

ok thanks for that answer. Didn't actually think about adding text-left to it to fix it (to fix it on the main site I added the following CSS
.accordion .btn-link {
text-align: left !important;
}

, also thanks for the advice about adding btn-block and I've just noticed that adding btn-block to it also fixes the alignment too without extra css/classes.