Add Field for custom class in TYPO3 CE - typo3

Question

I'm trying to add a field for adding a custom class to all TYPO3 CE (i.e Bootstrap Classes).
The Field is shown in the BE CEs and I'm able to write f.e. col-md-6 in this field.
The DB has a field called bootstrap_css where the values are stored.
But I've no Idea on how to get a wrap around the CE in FE with that custom class:
Example: Adding col-md-6 in the BE Field should result in something like this:
<div class="col-md-6">
<div class="csc-default">
....
</div>
</div>
Any Idea?

Answer 1

A free input for classes is generally considered bad practice (-> separation of concerns).
For such cases, I use the classic 'header_layout' method, based on www.typo3wizard.com/en/snippets/cool-stuff-typoscript/using-the-layout-field-in-tt-content-and-pages.html
This works very robustly, and editors can pick any value you offer them.
It IS a workaround, but it's been used for ages.
The header_layout box has been used because it's in a convenient place for editors. Originally, it was designed to pick a layout just for the element.
in page TSConfig:
TCEFORM.tt_content {
// Layout-Selector
header_layout.altLabels.0 = Normal
header_layout.altLabels.1 = Kasten
header_layout.altLabels.2 = Bilder 1/2
header_layout.altLabels.3 = Bilder 1/3
header_layout.altLabels.4 = Dokumente 1/2 (mit Rand)
header_layout.altLabels.5 = Dokumente 1/3 (mit Rand)
// everything higher than 5 goes here
header_layout.addItems {
// 6 = Box für wichtige Daten
// 7 = Box für Kosten
// 8 = Box für Arbeiten / Literatur
}
// Remove items if less than 5
// 100 is "hidden"
header_layout.removeItems = 100
}
Then in page TS:
Assuming we want to wrap text and textpic elements:
tt_content.text.stdWrap.outerWrap.cObject=CASE
tt_content.text.stdWrap.outerWrap.cObject=CASE
tt_content.text.stdWrap.outerWrap.cObject{
key.field = header_layout
default=TEXT
default.value=|
1=TEXT
1.value=<aside class="kasten halfimg clearfix">|</aside>
2=TEXT
2.value=<div class="halfimg clearfix">|</div>
3=TEXT
3.value=<div class="thirdimg clearfix">|</div>
4=TEXT
4.value=<div class="halfimg-border clearfix">|</div>
5=TEXT
5.value=<div class="thirdimg-border clearfix">|</div>
}
tt_content.textpic.stdWrap.outerWrap.cObject=CASE
tt_content.textpic.stdWrap.outerWrap.cObject{
key.field = header_layout
default=TEXT
default.value=|
1=TEXT
1.value=<aside class="kasten halfimg clearfix">|</aside>
2=TEXT
2.value=<div class="halfimg clearfix">|</div>
3=TEXT
3.value=<div class="thirdimg clearfix">|</div>
4=TEXT
4.value=<div class="halfimg-border clearfix">|</div>
5=TEXT
5.value=<div class="thirdimg-border clearfix">|</div>
}
So basically, you tap into the rendering of css_styled_content and tell it to wrap that content element depending on what is set in header_layout.