Bootstrap 5.3 Containers 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5.3 Containers Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Default container, full-width -->
  <div class="container">
    <h2>Default Container (Full-width)</h2>
    <p>This container has 100% width on all screen sizes.</p>
  </div>

  <!-- Container with specified breakpoint -->
  <div class="container-md">
    <h2>Container with Medium Breakpoint</h2>
    <p>This container has 100% width until the medium breakpoint is reached.</p>
  </div>

  <!-- Fluid container, always full-width -->
  <div class="container-fluid">
    <h2>Fluid Container (Always Full-width)</h2>
    <p>This container always has 100% width regardless of the screen size.</p>
  </div>

</body>
</html>

Code Output

Bootstrap 5.3 Containers Example

Default Container (Full-width)

This container has 100% width on all screen sizes.

Container with Medium Breakpoint

This container has 100% width until the medium breakpoint is reached.

Fluid Container (Always Full-width)

This container always has 100% width regardless of the screen size.

Containers

The container class, which is used to create a responsive container for your website’s content. The container class ensures that the content is properly aligned and centered within the available space.

    • .container: The basic container class used to create a responsive fixed-width container. It centers the content and adapts its width based on the viewport size.
    • container-fluid: This variant creates a full-width container that spans the entire width of the viewport. It fluidly adjusts its size as the screen size changes.
    • .container-{breakpoint} class in Bootstrap 5.3 sets the width of the container to 100% until the specified breakpoint is reached. This class allows you to create responsive layouts by defining different container widths for different screen sizes.