I currently have a Bootstrap accordion set up on my website using Bootstrap 4.1.0
<div id="accordion" class="mt-3">
<div class="card">
<div class="card-header bg-dark text-white" id="headingOne">
<h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Title 1
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Content 1
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-dark text-white" id="headingTwo">
<h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Title 2
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Content 2
</div>
</div>
</div>
</div>
The issue I am facing is that in order to open or close a card in the accordion, I have to click on the h5 tag, which is smaller than the entire card-header. This can be seen clearly in the following image:
https://i.sstatic.net/9Wv6Q.jpg
I would like to modify it so that the accordion opens when clicking anywhere on the entire card-header, rather than just the h5 element.