Advertisement

Google Ad Slot: content-top

Bootstrap 5 Overflow

~1 min read · Bootstrap
On this page

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., xy).
  • type : Defines the direction of the margin (e.g., autohiddenvisiblescroll).

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
This content will add a scrollbar if it overflows the container.
More content...
More content...
More content...
More content...
More content...
Try it yourself

Horizontal Overflow

This content will scroll horizontally.
Example
This content will scroll horizontally.
Try it yourself

Hidden Overflow

This content will be clipped and not scrollable.
More content...
More content...
More content...
More content...
More content...
Example
This content will be clipped and not scrollable.
More content...
More content...
More content...
More content...
More content...
Try it yourself