Bootstrap - Container max-width

[ebody]

Hallo,

ich möchte, dass ein Container bis zum Breakpoint Large (Displaybreite 992 Pixel) die volle Breite einnimmt. Ab 992 Pixel Displaybreite soll die Containerbreite max. 960 Pixel betragen.

Dafür habe ich container-lg verwendet, siehe.

<div class="container-lg bg-dark p-3">
  <p class="bg-white text-dark m-3 p-2 text-center">Hallo Welt!</p>
</div>

Ziehe ich das Browserfenster auf 1200 Pixel wird der Container 1140px breit und ab 1400 wird der Container 1320 Pixel breit. Ich dachte eigentlich, dass mit container-lg der Container max. 960px breit wird. Aber da habe ich wohl die Tabelle falsch verstanden.

Ich habe jetzt mit CSS die Breite auf max. 960px festgelegt. Aber bietet Bootstrap da nicht eine andere Möglichkeit, eine Klasse, damit man nicht extra CSS ergänzen muss?

@media (min-width: 992px) {
    .container-lg{
    width: 960px; 
  }
}

Gruß ebody

[Gunnar Bittersmann]

@@ebody

<div class="container-lg bg-dark p-3">
  <p class="bg-white text-dark m-3 p-2 text-center">Hallo Welt!</p>
</div>

Ziehe ich das Browserfenster auf 1200 Pixel wird der Container 1140px breit und ab 1400 wird der Container 1320 Pixel breit. Ich dachte eigentlich, dass mit container-lg der Container max. 960px breit wird. Aber da habe ich wohl die Tabelle falsch verstanden.

Ja, du musst horizontal lesen, nicht vertikal.

Für Viewportbreite v < 992px („Extra small“, „Small“, „Medium“) ist die Breite des container-lg c = 100%.
Für 992px ≤ v < 1200px („Large“) ist c = 960px.
Für 1200px ≤ v < 1400px („X-Large“) ist c = 1140px.
Für 1400px ≤ v („XX-Large“) ist c = 1320px.

Works as intended.

Ich habe jetzt mit CSS die Breite auf max. 960px festgelegt. Aber bietet Bootstrap da nicht eine andere Möglichkeit, eine Klasse, damit man nicht extra CSS ergänzen muss?

Hab auf die Schnelle nichts dergleichen gefunden. (Was nicht heißen muss, dass es nichts gibt. Ich bin aber nicht erpicht darauf, mich tiefergehend mit Bootcrap zu beschäftigen.)

😷 LLAP