BootstrapHow-ToBeginner · 4 min read

How to Use Overflow Utilities in Bootstrap for Scroll and Hidden Content

In Bootstrap, you control content overflow using overflow utility classes like overflow-auto, overflow-hidden, overflow-scroll, and overflow-visible. These classes let you decide if content should scroll, be hidden, or visible when it exceeds its container size.

📐

Syntax

Bootstrap provides simple utility classes to control the CSS overflow property on elements. You add these classes directly to your HTML elements.

overflow-auto: Adds scrollbars only if needed.
overflow-hidden: Hides any overflow content.
overflow-scroll: Always shows scrollbars.
overflow-visible: Shows overflow content outside the container.

html

<div class="overflow-auto" style="width: 200px; height: 100px; border: 1px solid #ccc;">
  Content that might overflow and scroll if needed.
</div>

Output

A 200x100 pixel box with a border that scrolls if content is too big.

💻

Example

This example shows four boxes each using a different overflow utility class. You can see how content behaves differently when it is larger than the box.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Overflow Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 2px solid #007bff;
      margin-bottom: 1rem;
      padding: 0.5rem;
      overflow-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="box overflow-auto">
    <strong>overflow-auto:</strong> Scrollbars appear only if needed.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="box overflow-hidden">
    <strong>overflow-hidden:</strong> Overflow content is hidden.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="box overflow-scroll">
    <strong>overflow-scroll:</strong> Scrollbars always visible.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="box overflow-visible">
    <strong>overflow-visible:</strong> Overflow content visible outside box.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</body>
</html>

Output

Four blue-bordered boxes stacked vertically, each 200x100 px, showing different overflow behaviors: auto scroll, hidden overflow, always scroll, and visible overflow outside the box.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap overflow utilities include:

Not setting a fixed height or width on the container, so overflow behavior is not visible.
Using overflow-visible expecting content to be clipped, but it actually shows outside the container.
Forgetting that overflow-auto only shows scrollbars when needed, so sometimes no scrollbar appears.
Not testing on different screen sizes, which can affect overflow behavior.

html

<!-- Wrong: No fixed height, overflow not visible -->
<div class="overflow-auto" style="width: 200px;">
  Content that is too long but no height set, so no scroll.
</div>

<!-- Right: Fixed height to enable scrolling -->
<div class="overflow-auto" style="width: 200px; height: 100px;">
  Content that is too long and scrolls properly.
</div>

Output

First box shows all content with no scroll because height is not fixed; second box scrolls content inside a 200x100 px area.

📊

Quick Reference

Class	Effect on Overflow
overflow-auto	Scrollbars appear only if content overflows
overflow-hidden	Overflow content is hidden (clipped)
overflow-scroll	Scrollbars always visible, even if not needed
overflow-visible	Overflow content visible outside container

✅

Key Takeaways

Use Bootstrap overflow utility classes to control how content behaves when it exceeds container size.

Always set fixed width and height on containers to see overflow effects clearly.

Choose overflow-auto for scrollbars only when needed, and overflow-hidden to clip overflow content.

Test overflow behavior on different screen sizes to ensure consistent user experience.

Remember overflow-visible lets content spill outside the container, which may affect layout.