QuitExams

W3.CSS Containers

A container in W3.CSS is a responsive block that holds content. Containers can be used to group elements, add spacing, and center content on the page. They use padding, margin, and max-width to maintain proper alignment.

1️⃣ Basic Container (w3-container)

This adds default padding and a responsive width.

<div class="w3-container w3-blue">
  This is a basic W3.CSS container.
</div>

2️⃣ Container with Multiple Elements

Containers can hold multiple child elements like cards, text, or images.

<div class="w3-container w3-light-grey">
  <h3>Title</h3>
  <p>Some content inside the container.</p>
  <div class="w3-card w3-white w3-padding">Card inside container</div>
</div>

3️⃣ Containers with Padding & Margin

You can combine container with w3-padding and w3-margin classes for spacing.

<div class="w3-container w3-green w3-padding w3-margin">
  Container with extra padding and margin
</div>

4️⃣ Centered Container

Use w3-center to center content inside a container.

<div class="w3-container w3-teal w3-center">
  This text is centered
</div>