Frage zu Konflikten der CSS-Klassen bzw. .container und .container-fluid

Ich entwickele gerade ein Theme für Contao 4.9 mit der Extension contao-bootstrap.
Das Layout sieht vor, dass es sowohl Bereiche gibt die gesamte Browserbreite nutzen und welche, die nur in einem fixen container mittig platziert werden.
Z.B. ce_text (mit Bild in voller Breite), ce_headline (max-width 1500px) und das Grid (max-width 1500px) sollen verwendet werden. Ich brauche kein Grid in voller Breite.

Layout
Anhang 23963

Mein Problem ist, dass ein div mit 100% Breite bei Bootstrap ja die Klasse "container-fluid" haben müsste und sich nicht in einem anderen div mit der klasse "container" befinden darf.
Standardmäßig gibt Contao aber folgendes aus, obwohl ich im Inhalt noch mal volle Breite für ein Bild brauche:

HTML-Code:

---

<div class="container" id="container">
<main id="main" itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
<div class="inside">

---

Alles was jetzt folgt - auch ein div mit der Klasse fluid-container, kann somit nicht mehr die volle Breite haben. Die Verschachtelung bzw. der Konflikt der Klassennamen ist also mein Problem.

Muss ich jetzt alle betreffenden Templates anpassen um bei Contao sämtliche Angaben der Klasse "container" zu entfernen oder sollte ich die Bootstrap-Dateien so anpassen, dass anstelle von "container" eine andere Klassenbezeichnung gewählt wird? Oder verstehe ich etwas grundlegend nicht?

Ein anderer Ansatz wäre es so zu lösen, dass ich das Bootstrap-Grid nur innerhalb des Contao main-containers mit max-width 1500px verwende und nicht den fluid-container. Aber wie kann ich dann im main-Bereich (der über die container-Klasse bereits auf 1500px begrenzt ist) dennoch die volle Bildschirmbreite hinaus für ein Bild nutzen? Dies wäre wohl eher keine Bootstrap, sondern eine Contao/CSS Frage oder?

Bei mir benutzt Contao "container" als ID nicht als Klasse. Somit kann man die Klasse von Bootstrap benutzen. Man muss nur auf die Wertigkeit achten.

Für den Einbau von Klassennamen würde ich mir mal die Erweiterung https://github.com/Contao-DD/advanced-classes-bundle. Ich glaube die wurde genau für so etwas gebaut.
Getestet habe ich das allerdings selbst noch nicht, weil ich es bisher nicht benötigt habe.
Alternativ ist vielleicht auch die boostrap-Erweiterung für Contao einen Blick wert - entweder das komplette Bundle oder einzelne Komponenten (gibt es als eigene Erweiterungen)

Hi,

Dein Layout kannst Du mit der Bootstrap Erweiterung einfach umsetzen. Wenn ich das richtig sehe, dann möchtest Du folgendes:

Header --> container
Bereich ganze Breite --> container-fluid
Inhaltsbereich --> container
Footer über ganze Breite --> container-fluid

Im Seitenlayout als Typ des Layouts "Bootstrap" wählen. Jetzt kannst Du für Header, Footer und Container CSS-Klassen vergeben. Bei Header und Container gibst Du als Klasse "container" an, beim Footer "container-fluid".
Für das Bild erstellst Du einen eigenen Layoutbereich. Für diesen wählst Du als Template "block_section", dann erstreckt sich der Bereich über die komplette Bildschirmbreite. Dann noch als Position "unterhalb der Kopfzeile", und Du hast den Bereich gleich unter dem Header.

Gruß
Mathias

Ich finde es klasse, wie gut und schnell hier geantwortet wird, danke Euch!
@Mathias: Ich denke, Du hast genau beschrieben, was ich brauche - einen eigenen Layoutbereich für den Bereich zwischen header und main.
Ich habe immer versucht alles im main untereinander unterzubringen, das macht es aber umständlich bzw. geht nicht konform mit der Contao-Bootstrap-Extension.
Ich werde es jetzt testen.
VG Jogi