WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Overflow

Previous Next

Bootstrap 5 provides utility classes to control the overflow behavior of an element. These classes help manage content that exceeds the container’s dimensions


Syntax:

overflow-{direction}-{type}
  • overflow: Indicates overflow.
  • direction (optional): Direction of overflow (e.g., x, y).
  • type : Defines the direction of the margin (e.g., auto, hidden, visible, scroll).

Class

Description

overflow-auto

Adds scrollbars only if content overflows (overflow:auto)

overflow-hidden

Hides overflowing content (overflow:hidden)

overflow-visible

Default. Content is visible outside the box (overflow:visible)

overflow-scroll

Always shows scrollbars, even if content doesn’t overflow (overflow:scroll)

overflow-x-auto

Horizontal scrollbar if content overflows (overflow-x:auto)

overflow-x-hidden

Hides horizontal overflow (overflow-x:hidden)

overflow-x-scroll

Always shows horizontal scrollbar (overflow-x:scroll)

overflow-y-auto

Vertical scrollbar if content overflows (overflow-y:auto)

overflow-y-hidden

Hides vertical overflow (overflow-y:hidden)

overflow-y-scroll

Always shows vertical scrollbar (overflow-y:scroll)

Bootstrap 5 Basic Overflow Handling

This content will add a scrollbar if it overflows the container.
More content...
More content...
More content...
More content...
More content...
Example
<div class="overflow-auto border" style="height: 100px;">
This content will add a scrollbar if it overflows the container.
<br>More content...<br>More content...<br>More content...<br>More content...<br>More content...
</div>
Try it yourself

Horizontal Overflow

This content will scroll horizontally.
Example
<div class="overflow-x-auto border" style="width: 200px;">
<div style="width: 400px;">This content will scroll horizontally.</div>
</div>
Try it yourself

Hidden Overflow

This content will be clipped and not scrollable.
More content...
More content...
More content...
More content...
More content...
Example
<div class="overflow-hidden border" style="height: 100px;">
This content will be clipped and not scrollable.
<br>More content...<br>More content...<br>More content...<br>More content...<br>More content...
</div>
Try it yourself

Previous Next