Layout Helpers

🧰 Bootstrap Layout Helpers

Your Magical Toolbox for Perfect Layouts

Imagine you have a magical toolbox. Inside are special tools that help you arrange things perfectly—like organizing toys on a shelf or making sure your picture frame fits just right on the wall.

Bootstrap’s Layout Helpers are exactly like that toolbox! They’re tiny, powerful utilities that solve everyday layout problems in seconds.

Let’s open this toolbox and discover each magical tool inside! 🎁

📐 Aspect Ratios

The Picture Frame Keeper

Have you ever tried to fit a photo into a frame that’s the wrong size? It looks weird, right?

Aspect Ratios are like magical frames that always keep the perfect shape—no matter how big or small they get.

The Magic Explained

When you embed a video or image, you want it to keep its shape. A square should stay square. A movie screen (16:9) should stay movie-shaped.

<div class="ratio ratio-16x9">
  <iframe src="video-url"></iframe>
</div>

Available Ratios

🎯 Simple Example

<!-- A video that stays 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="youtube.com/...">
  </iframe>
</div>

<!-- A square image box -->
<div class="ratio ratio-1x1">
  <img src="cat.jpg"
       class="object-fit-cover">
</div>

Why it matters: Without aspect ratios, videos might look squished or stretched on different screens. This tool keeps them perfect!

📦 Stacks Vertical

The Tower Builder

Think of building blocks. When you stack them on top of each other, you build a tower!

Vertical Stacks help you stack elements from top to bottom—like building a tower of content.

graph TD
    A["Box 1"] --> B["Box 2"]
    B --> C["Box 3"]
    C --> D["Box 4"]

The Magic Word: vstack

<div class="vstack gap-3">
  <div>First item on top</div>
  <div>Second item below</div>
  <div>Third at the bottom</div>
</div>

What gap-3 Does

The gap controls spacing between items:

• gap-1 = tiny space
• gap-2 = small space
• gap-3 = medium space (most common)
• gap-4 = large space
• gap-5 = huge space

🎯 Real Example: A Form

<form class="vstack gap-3">
  <input placeholder="Name">
  <input placeholder="Email">
  <button>Submit</button>
</form>

All inputs stack neatly, evenly spaced!

📏 Stacks Horizontal

The Train Builder

Now imagine toy train cars connected in a line—side by side!

Horizontal Stacks arrange items left to right, like train cars on a track.

graph LR
    A["Box 1"] --> B["Box 2"]
    B --> C["Box 3"]

The Magic Word: hstack

<div class="hstack gap-3">
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</div>

🎯 Real Example: Button Group

<div class="hstack gap-2">
  <button class="btn btn-primary">
    Save
  </button>
  <button class="btn btn-secondary">
    Cancel
  </button>
</div>

Pro Tip: The Vertical Rule

You can add a line between items:

<div class="hstack gap-3">
  <span>Home</span>
  <div class="vr"></div>
  <span>About</span>
  <div class="vr"></div>
  <span>Contact</span>
</div>

🔗 Stretched Link

The Invisible Click Expander

Imagine you have a card with a title. You want clicking anywhere on the card to go to a new page—not just the tiny title text.

Stretched Link makes a link’s clickable area stretch to fill its entire container!

Before (Bad)

┌──────────────────┐
│  Title ← only    │
│  this is         │
│  clickable       │
│                  │
└──────────────────┘

After (Good)

┌──────────────────┐
│  Entire card     │
│  is now          │
│  clickable! ✓    │
│                  │
└──────────────────┘

The Magic Class

<div class="card position-relative">
  <div class="card-body">
    <h5>Article Title</h5>
    <p>Some description...</p>
    <a href="/article"
       class="stretched-link">
      Read more
    </a>
  </div>
</div>

Key Requirement: The parent needs position-relative for this magic to work!

✂️ Text Truncation

The Polite Text Trimmer

Sometimes text is too long and breaks your beautiful design. What do you do?

Text Truncation politely cuts off text and adds “…” at the end!

Before

This is a very long sentence
that wraps to multiple lines
and looks messy

After

This is a very long sent...

The Magic Class

<p class="text-truncate">
  This super long text will be
  cut off with ellipsis...
</p>

Important Rule!

The element needs a max-width or width set:

<div style="max-width: 200px;">
  <p class="text-truncate">
    Very long text here...
  </p>
</div>

🎯 Real Example: User List

<div class="d-flex"
     style="width: 150px;">
  <span class="text-truncate">
    Jonathan Alexander Smith
  </span>
</div>
<!-- Shows: "Jonathan Alexan..." -->

👻 Visually Hidden

The Invisible Helper

Some content should be invisible to eyes but visible to screen readers (tools that read websites aloud for blind users).

Visually Hidden hides content from sight but keeps it accessible!

Why Use It?

• Accessibility for blind users
• Extra context for screen readers
• Hidden form labels that still work

The Magic Class

<button>
  <i class="bi bi-heart"></i>
  <span class="visually-hidden">
    Add to favorites
  </span>
</button>

What happens:

• Sighted users see: ❤️ (heart icon)
• Screen readers say: “Add to favorites button”

Another Example

<a href="/home">
  <i class="bi bi-house"></i>
  <span class="visually-hidden">
    Go to home page
  </span>
</a>

Focusable Version

Sometimes you want hidden content to appear when focused:

<a class="visually-hidden-focusable"
   href="#main">
  Skip to main content
</a>

| Vertical Rule

The Standing Divider

You know how a horizontal line (<hr>) separates content top-to-bottom?

Vertical Rule does the same but side-to-side—a standing line that divides content horizontally!

The Magic Tag

<div class="hstack gap-3">
  <span>Item 1</span>
  <div class="vr"></div>
  <span>Item 2</span>
  <div class="vr"></div>
  <span>Item 3</span>
</div>

Visual Result

Item 1  |  Item 2  |  Item 3

🎯 Real Examples

Navigation Bar:

<div class="hstack gap-2">
  <span>Dashboard</span>
  <div class="vr"></div>
  <span>Settings</span>
  <div class="vr"></div>
  <span>Logout</span>
</div>

Stats Display:

<div class="hstack gap-3 text-center">
  <div>
    <strong>125</strong>
    <div>Posts</div>
  </div>
  <div class="vr"></div>
  <div>
    <strong>456</strong>
    <div>Followers</div>
  </div>
</div>

🧠 Quick Comparison

🎉 You Did It!

You’ve unlocked all the magical tools in Bootstrap’s Layout Helper toolbox!

These tiny utilities solve big problems:

• ✅ Videos that keep their shape
• ✅ Elements that stack perfectly
• ✅ Cards that are fully clickable
• ✅ Text that never overflows
• ✅ Content that’s accessible to everyone
• ✅ Beautiful dividers between items

Now go build something amazing! 🚀