I am encountering an issue with the layout of my asp.net mvc core web application + bootstrap 4.0 FAQ section. The problem is that the question description overflows the screen on small screens, while the answer text aligns properly. I need a solution to make the button text span multiple lines on smaller screens. Here is the code snippet:
@foreach (var item2 in Model.OrderBy(a => a.Description))
{
<div class="card">
<div class="card-header" id="@item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="#@item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
@Html.DisplayFor(modelItem => item2.Description)
</button>
</h5>
</div>
<div id="@item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
@Html.Raw(item2.Answer)
</div>
</div>
</div>
}
Edit-1:-
Check out the code for a question that spills over on small screens:
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided? What if my practice is already performing these services?
</button>