Best practise for customisations & theming

# Support

Hi there. First, thank you a ton for this extensive and well maintainend extension!

I started a new project and have to customise and theme a few of the components. However, since Typo3 seems to offer many ways of achieving the same thing, I was wondering if there is a golden path, a best-practice on how to proceed. Afterall, bootstrap is made to be themed and so is this package.

Being newer to Typo3 development (other than maintaining legacy systems) I am probably pretty clueless where to start.

## Description

### Questions

1. Why are (some) of the content elements not using bootstrap classes (i.e., `textpic` is setting width to 50% instead of using `row > col-6, col-6`.
2. How would I customise the `textpic` component, if I wanted to use 5col/7col? (My idea: overload the styles OR overload the template and add bs classes)
3. I want to add a gradient overlay to the background-image (both carousel and frame). It seems I can't really use the same approach for both. So I went with a custom `frame-option` for the frame and overriding the FlexForm for the Carousel-Item. Which way is the preferred way of achieving this?
1. Overload the `BackgroundImage.xml` FlexForm configuration, add a new flag, overwrite the templates? (This does not work as easily for the `frame` since there the background image options are being parsed by the `FrameViewHelper`. Adapt this too?)
2. Add another layout (either with or without the frame wrapper)
3. Something else?
4. Another scenario: I want to be able to configure a `col-12 col-sm-10 offset-1` frame / container. Now I found three potential ways of doing this. Which one is the best practice?
1. Create a new container element and my layout (+ relatively easy, can use bootstrap classes directly but looses the frame functionality)
2. Create a new layout (also looses the frame stuff)
3. Configure frame (class/layout/option) and extend bootstrap classes via SCSS

## Screenshots

[visible confusion]

This issue names BackgroundImage.xml, FrameViewHelper, FlexForm configuration, templates, and SCSS but does not identify a single target file or test. Start by tracing the textpic, carousel, and frame customization paths in those areas, then compare the available approaches. Done means documenting a consistent recommended path for the four requested theming scenarios.

Written by the indexing model from the issue text.