I am currently using Bootstrap and have an accordion with collapsible buttons. Each button consists of two columns of text and an icon on the right.
My issue is that I'm attempting to break the text in the second column into multiple lines so that it can fit within the button.
Any suggestions or ideas on how to achieve this?
You can view an example in this CodePen: https://codepen.io/averied/pen/gBoxbw
I specifically need to break the text inside the div with the id "bloc2".
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col col-lg-4">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div id="block_container" cols="4">
<div id="bloc1">SmallText</div>
<div id="bloc2">Please break this text it's very large and doesn't fit</div>
<button id="delbtn"/></button>
</div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>