I've been trying to figure out a solution to this issue, but so far nothing seems to work. I'm working on creating some general components for a system using Bootstrap 5. I've defined a button like this:
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
However, when users add this to their container in the system, an additional outer container is automatically generated:
<div class="divContainer">
//button
</div>
So if users try to add two buttons, the code will end up looking like this:
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
I'm wondering how I can inline these buttons and adjust their alignment without being able to add classes to the outer container of the divContainers. Any help or insights on this issue would be greatly appreciated. Thank you.