I've got a quick and simple question. I have created a form group component which renders,
<div class="form-group mb-8">...</div>
components for a project. As you can see, I give mb-8 to all form groups to add some spacing between them. But I want the last form group child to have mb-0 so I give a specific attribute to that component which adds mb-0 to that form group and the end result is like below:
<div class="form group mb-8 mb-0">...</div>
I don't want to remove that mb-8 class from that component because If I remove it, I will have to specify it on each component like <component container-class="mb-8">...</component>. I don't want to repeat that in every component except last child, so what I want to do it just write last component child as <component container-class="mb-0">...</component> and that will give me a component with no bottom margin.
I can use m-8 mt-0 me-0 ms-0 combination and add mb-0 to that class list and have no bottom margin, but that causes every element in HTML output to have at least 4 margin classes and It looks a little ugly. Like below:
<div class="form-group m-8 mt-0 ms-0 me-0">...</div>
<div class="form-group m-8 mt-0 ms-0 me-0">...</div>
<div class="form-group m-8 mt-0 ms-0 me-0 mb-0">...</div>
Any recommendations? Or do I have to use that ugly combination..?