QuitExams

W3.CSS Panels

A panel in W3.CSS is a box used to group content inside a container. Panels can have background colors, borders, shadows, and text alignment.

1️⃣ Basic Panel (w3-panel)

Simple panel with background color.

<div class="w3-panel w3-blue">
  This is a basic panel
</div>

2️⃣ Panel with Extra Padding

Using w3-padding class to increase spacing.

<div class="w3-panel w3-green w3-padding">
  Panel with extra padding
</div>

3️⃣ Panel with Card Shadow

Use w3-card to add shadow effect.

<div class="w3-panel w3-white w3-card w3-padding">
  Panel with shadow
</div>

4️⃣ Panel with Centered Text

Add w3-center to center the content.

<div class="w3-panel w3-teal w3-center">
  Centered text panel
</div>