How can i center a div with the class of "collapse" (Bootstrap)? - html

Question

Currently i have the following:
I would like the collapsible cards to be centered under the text and icons.. How would i go about doing that? I have tried using CSS on the div, however nothing seems to make a change in their position?
The code i have so far:
<div class="categoryList">
#result
#if (result == "")
{
foreach (String dataLine in userData)
{
<p>
<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
#dataLine.Split(delimiterChar)[0]
</a>
<button class="btn"><i class="fas fa-plus secondaryPlusIcon"></i></button>
<button class="btn"><i class="far fa-edit secondaryPlusIcon"></i></button>
<button class="btn"><i class="far fa-trash-alt secondaryPlusIcon"></i></button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body w-25 p-3">
</div>
</div>
}
}
</div>

Answer 1

If Kira's answer does not work you could try this as an alternative.
<div class="collapse" id="collapseExample">
<div class="card card-body w-25 p-3 desiredclassname">
...
</div>
</div>
CSS code:
.desiredclassname{
margin: auto;
}
Hope it helps :)

Answer 2

You can use CSS flexbox to get exact centering
.collapse{
display: flex;
justify-content: center;
}
There is more info here https://www.w3schools.com/css/css3_flexbox.asp
Or, you could wrap it in a <center> tag:
<center>
<div class="collapse" id="collapseExample">
...
</center>
The center tag is discouraged, however. It could be replaced by
<div style="text-align: center;">
<div class="collapse" id="collapseExample">
...
</div>
Hopefully one of these answers helps!