У меня есть аккордеон в начальной загрузке 4. Текст в заголовке карты не отвечает, поэтому, когда его длина превышает ширину заголовка карты, он отображается снаружи.
<div class="card">
<div class="card-header" id="headingEight">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
<p>1. Header which is not responsive so in mobile it does not display right</p>
</button>
</h5>
</div>
<div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordion">
<div class="card-body text-justify">
Text here is responsive
</div>
</div>
</div>