What is Full-bleed section within container in Tailwind?

Tailwindmarkup~5 mins

Full-bleed section within container in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

A full-bleed section stretches across the entire width of the screen, ignoring the usual content container limits. This helps highlight important parts of a page, like banners or special offers.

When you want a banner or image to span the entire screen width.

To create a standout section that breaks the normal content flow.

For backgrounds or colors that should cover the full browser width.

When you want to separate content visually with a wide section.

Syntax

Tailwind

<div class="container mx-auto">
  <div class="relative">
    <div class="absolute w-screen left-1/2 -translate-x-1/2">
      <!-- Full-bleed content here -->
    </div>
    <div class="relative">
      <!-- Normal container content here -->
    </div>
  </div>
</div>

The container mx-auto centers content and limits width.

Using absolute w-screen left-1/2 -translate-x-1/2 inside a relative parent lets the section stretch full viewport width.

Examples

This example shows a blue full-bleed banner inside a container.

Tailwind

<div class="container mx-auto">
  <div class="relative">
    <div class="absolute w-screen left-1/2 -translate-x-1/2 bg-blue-500 text-white p-6">
      Full-bleed blue banner
    </div>
    <div class="relative p-4">
      Normal container content
    </div>
  </div>
</div>

Here a full-bleed green section is placed above normal content with spacing.

Tailwind

<div class="container mx-auto">
  <div class="relative">
    <section class="absolute w-screen left-1/2 -translate-x-1/2 bg-green-300 p-8">
      <h2 class="text-center font-bold">Full-bleed section</h2>
    </section>
    <main class="relative mt-24">
      <p>Page content inside container</p>
    </main>
  </div>
</div>

Sample Program

This page shows a full-bleed indigo section inside a centered container. The full-bleed section uses absolute positioning to stretch across the screen. The main content below stays inside the container.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Full-bleed Section Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <div class="container mx-auto p-4 bg-white shadow">
    <h1 class="text-2xl font-semibold mb-6">Page Title</h1>
    <div class="relative">
      <section class="absolute w-screen left-1/2 -translate-x-1/2 bg-indigo-600 text-white p-8">
        <h2 class="text-center text-xl font-bold">Full-bleed Indigo Section</h2>
        <p class="text-center mt-2">This section stretches across the entire screen width.</p>
      </section>
      <main class="relative mt-32">
        <p>This is normal content inside the container. It stays centered and limited in width.</p>
      </main>
    </div>
  </div>
</body>
</html>

OutputSuccess

Important Notes

Make sure the parent container has relative positioning to contain the absolute full-bleed section.

Use margin or padding on the normal content to avoid overlap with the full-bleed section.

Test on different screen sizes to ensure the full-bleed section looks good everywhere.

Summary

Full-bleed sections stretch across the entire screen width, ignoring container limits.

Use absolute w-screen left-1/2 -translate-x-1/2 inside a relative container to create full-bleed effect.

Keep normal content inside the container with spacing to avoid overlap.