Cacher is the code snippet organizer for pro developers

# First define the tab cObject, we want this in the container
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_tab {

	# Add the ID and the Class to the tab container
	preCObject = LOAD_REGISTER
	preCObject {
		containerId.cObject = COA
		containerId.cObject {
			wrap = id="|"
			10 = TEXT
			10.wrap = tab-content-|
			10.field = uid
		}

		containerClasses.cObject = COA
		containerClasses.cObject {
			wrap = class="tab-pane |"

			# fade or empty
			10 = TEXT
			10.field = parentgrid_flexform_switch_effect
			10.noTrimWrap = | | |

			# We want the active flag on the first child
			20 = TEXT
			20.value = active in
			20.noTrimWrap = | | |
			20.if {
				 value = 1
				 equals.data = cObj:parentRecordNumber
				 equals.prioriCalc = 1
			}
		}
	}

	outerWrap = <div {register: containerId} {register: containerClasses}>|</div>
	outerWrap.insertData = 1

	# Render the children the default way
	columns.0 {
		renderObj = < tt_content
	}
}

# Define the Tab Container
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_container {
	# Render navigation using fluid
	cObject = FLUIDTEMPLATE
	cObject {
		file = fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_template.html
	}

	# Add the renderObj of the tab directly, this prevents the "csc-default"-wrap
	columns.0 {
		renderObj = < tt_content.gridelements_pi1
	}
}

# Tabs Container
tx_gridelements.setup.uebb_bootstrap_tabs_container {
    title = Tabs Container
	description = Ein Element das mehrere Tabs enthält
	flexformDS = FILE:fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_container.xml

	config {
		colCount = 1
		rowCount = 1

		rows {
			1 {
				columns {
					1 {
						name = Tab Container Element
						colPos = 0
						allowed = gridelements_pi1
					}
				}
			}
		}
	}
}

# Tab Element
tx_gridelements.setup.uebb_bootstrap_tabs_tab {
  	title = Tab
	description = Ein Tab für einen Tab-Container

	config {
		colCount = 1
		rowCount = 1

		rows {
			1 {
				columns {
					1 {
						name = Tab Element
						colPos = 0
					}
				}
			}
		}
	}
}

<ul class="nav {data.flexform_display_type}">
  	<f:for each="{data.tx_gridelements_view_children}" as="tab" iteration="tab_iteration">
		<li{f:if(condition:'{tab_iteration.isFirst}',then:' class="active"')}><a href="#tab-content-{tab.uid}" data-toggle="tab">{tab.header}</a></li>
	</f:for>
</ul>

<div class="tab-content">
	<f:format.raw>{data.tx_gridelements_view_columns.0}</f:format.raw>
</div>

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
  <meta type="array">
		<langDisable>1</langDisable>
	</meta>
	<sheets>
		<general>
			<ROOT type="array">
				<TCEforms>
					<sheetTitle>Einstellungen</sheetTitle>
				</TCEforms>
				<el type="array">
					<display_type type="array">
						<TCEforms type="array">
							<label>Aussehen</label>
							<config type="array">
								<type>select</type>
								<items type="array">
									<numIndex index="0" type="array"><numIndex index="0">Tabs</numIndex><numIndex index="1">nav-tabs</numIndex></numIndex>
									<numIndex index="1" type="array"><numIndex index="0">Pills</numIndex><numIndex index="1">nav-pills</numIndex></numIndex>
								</items>
								<default>nav-tabs</default>
							</config>
						</TCEforms>
					</display_type>
					<switch_effect type="array">
						<TCEforms type="array">
							<label>Switch effekt</label>
							<config type="array">
								<type>select</type>
								<items type="array">
									<numIndex index="0" type="array"><numIndex index="0">Ohne</numIndex><numIndex index="1"></numIndex></numIndex>
									<numIndex index="1" type="array"><numIndex index="0">Einblenden</numIndex><numIndex index="1">fade</numIndex></numIndex>
								</items>
								<default></default>
							</config>
						</TCEforms>
					</switch_effect>
				</el>
			</ROOT>
		</general>
	</sheets>
</T3DataStructure>