Bootstrap 5 Overflow

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
<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


Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.