0
0
Bootsrapmarkup~5 mins

Container types (container, container-fluid) in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Containers help organize your webpage content by keeping it neatly inside a box. They control how wide your content looks on different screen sizes.

When you want your content to have fixed widths that change on different screen sizes.
When you want your content to stretch across the entire width of the screen.
When you want to create a responsive layout that looks good on phones, tablets, and desktops.
When you want to center your content with some space on the sides.
When you want to remove side spaces and use the full screen width.
Syntax
Bootsrap
<div class="container"> ... </div>
<div class="container-fluid"> ... </div>
.container gives a responsive fixed width with margins on the sides.
.container-fluid makes the container always full width, filling the screen.
Examples
This container has fixed widths that change with screen size, keeping content centered with space on sides.
Bootsrap
<div class="container">
  Your content here
</div>
This container stretches across the entire screen width, no side margins.
Bootsrap
<div class="container-fluid">
  Your content here
</div>
Sample Program

This example shows two boxes: one inside a fixed-width container and one inside a full-width container. Resize your browser to see how the fixed container changes width but stays centered, while the fluid container always fills the screen.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Container Types</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      background-color: #007bff;
      color: white;
      padding: 1rem;
      margin-bottom: 1rem;
      text-align: center;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">This is a <strong>container</strong> with fixed responsive width.</div>
  </div>
  <div class="container-fluid">
    <div class="box">This is a <strong>container-fluid</strong> that fills full width.</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use .container when you want your content nicely centered with margins on large screens.

Use .container-fluid when you want your content to stretch edge to edge, like for backgrounds or full-width sections.

Both containers are responsive and adjust nicely on small screens like phones.

Summary

.container keeps content centered with fixed widths that change on screen size.

.container-fluid makes content fill the entire screen width.

Choose the container type based on how wide you want your content to appear.