Bootstrap 5: Container


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Bootstrap 5 Container

Aus dem vorherigen Kapitel haben Sie gelernt, dass Bootstrap ein Containing erfordert Element zum Umschließen von Websiteinhalten.

Behälter werden verwendet, um den Inhalt darin aufzufüllen davon, und es stehen zwei Containerklassen zur Verfügung:

  1. Die Klasse .container stellt einen reaktionsfähigen Container mit fester Breite bereit

  2. Die Klasse .container-fluid stellt einen Container in voller Breite bereit, der sich über die gesamte Breite des Ansichtsfensters erstreckt

.container
.container-fluid

Fester Container

Verwenden Sie die Klasse .container, um einen reaktionsfähigen Container mit fester Breite zu erstellen.

Beachten Sie, dass sich seine Breite (max-width) bei verschiedenen Bildschirmgrößen ändert:

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Öffnen Sie das folgende Beispiel und ändern Sie die Größe des Browserfensters, um zu sehen, dass sich die Containerbreite an verschiedenen Haltepunkten ändert:

Beispiel

 <div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

Der XXL-Haltepunkt (≥1400 Pixel) ist in Bootstrap 5 neu, während der größte Haltepunkt in Bootstrap 4 Extragroß (≥1200 Pixel) ist.

Fluid-Container (Container mit voller Breite).

Verwenden Sie die Klasse .container-fluid, um einen Container voller Breite zu erstellen, der sich immer über die gesamte Breite des Bildschirms erstreckt (Breite). ist immer 100 %):

Beispiel

 <div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>

Behälterpolsterung

Standardmäßig haben Container eine linke und rechte Polsterung, keine Polsterung oben oder unten. Daher verwenden wir häufig Abstandshilfen, wie z. B. zusätzliche Abstände und Ränder, damit sie noch besser aussehen. Beispiel: .pt-5 bedeutet „eine große obere Polsterung hinzufügen:

Beispiel

 <div class="container pt-5"></div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-5">
  <h1>My First Bootstrap Page</h1>
  <p>This container has an extra top padding.</p>
  <p>Try to remove the .pt-5 class to see the difference.</p>
</div>

</body>
</html>

Containerrand und -farbe

Auch andere Hilfsmittel wie Rahmen und Farben werden häufig zusammen mit Containern verwendet:

Beispiel

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container p-5 my-5 border">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a border and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

</body>
</html>

In einem späteren Kapitel erfahren Sie viel mehr über Farben und Rahmenhilfsprogramme.

Responsive Container

Sie können auch die Klassen .container-sm|md|lg|xl verwenden, um zu bestimmen, wann der Container reagieren soll.

Die max-width des Containers ändert sich je nach Bildschirmgröße/Ansichtsfenster:

Class Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Beispiel

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-3">
  <h1>Responsive Containers</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>