Typo3 FLUID and Bootstrap 4 “card-group”

Question

I am new to Fluid and Typo3 and trying to write my own template-extension based on Bootstrap 4. I like the cards of BS4 and added them as contentelement into my template-extension with no problem.

If I add content with my new card-contentelement now, I want this element and all other card-contentelements be wrapped into <div class="card-group> ... card div and other card-stuff ... </div> or better, I need the following structure:

<div class="card-group">
    <div class="card">
        CARD ONE
    </div>
</div>

<div class="container">
    OTHER CONTENT-ELEMENTS
</div>

<div class="card-group">
    <div class="card">
        CARD TWO
    </div>

    <div class="card">
        CARD THREE
    </div>
</div>

As you can see, I want to be one or more card-content-elements to be wrapped into a "card-group" div.

But I don't know how to do this within my layout, template nor typoscript. The only result I get is, that every card is wrapped in its own "card-group" div. =(

Any ideas? I am going nuts, sitting couple hours for a solution. Thanks in advance,

Chris

Answer 1

Any content element (CE) does know nothing about other CEs.
As a result each CE can only wrap itself.

If you want a wrap around multiple CEs you either have to build a container or do nasty things in javascript.

last one first:
you have to analyze the HTML-source end remove the wrapping between adjacent cards. As this easily can go wrong I would not realize it. You need to remove a </div><div class="card-group"> where the closing div also needs to be a class card-group. very difficult to identify!

---

As Phillip suggested: there are multiple solutions to use container-CEs in TYPO3.
The container CE will do the outside wrap ( <div class="card-group">|</div> ).
The contained CEs do the subrendering ( <div class="card">|</div> )

Container CEs could be defined easily with EXT:gridelements, EXT:mask, ...

---

Another way of container would be a "page column". here the drawback is a very static layout. A markup like your example would need two reserved columns for cards.