Bootstrap 5 Overflow
Last Updated :
04 Apr, 2024
Bootstrap 5 Overflow provides utility classes to manage overflow behavior within elements. Options include auto, hidden, visible, and scroll, allowing control over content display in constrained spaces, ensuring a better user experience and layout management.
Overflow Classes in Bootstrap:
| Class Name | Description |
|---|
| overflow-auto | Allows overflowing elements inside a div. |
| overflow-hidden | Forbids overflow of elements within a div. |
| overflow-visible | Allows components inside the div to overflow. |
| overflow-scroll | Enables overflow with the assistance of a scrollbar. |
Syntax:
<div class="overflow-*">...</div>
Here, * will be the variable that could be replaced from the above-mentioned classes.
Examples of Bootstrap 5 Overflow
Example 1: Using .overflow-auto and .overflow-hidden classes in div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Overflow</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<h2 class="text-black-50">
Bootstrap 5 Overflow
</h2>
<div
class="overflow-auto p-3 bg-light"
style="
max-width: 360px;
max-height: 80px;
"
>
This is an example of using
<code>.overflow-auto</code>
on an element with set width and
height dimensions. By design, this
content will vertically scroll.
</div>
<div
class="overflow-hidden p-3 bg-light"
style="
max-width: 360px;
max-height: 80px;
"
>
This is an example of using
<code>.overflow-hidden</code>
on an element with set width and
height dimensions.
</div>
</body>
</html>
Output:
Bootstrap 5 Overflow Example Output
Example 2: Using .overflow-visible and .overflow-scroll classes in  div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Overflow</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<h2 class="text-black-50">
Bootstrap 5 Overflow
</h2>
<div
class="overflow-visible p-3 bg-light"
style="
max-width: 360px;
max-height: 80px;
"
>
This is an example of using
<code>.overflow-visible</code>
on an element with set width and
height dimensions. By design, this
content will vertically scroll.
</div>
<div
class="overflow-scroll p-3 bg-light"
style="
max-width: 360px;
max-height: 80px;
"
>
This is an example of using
<code>.overflow-scroll</code>
on an element with set width and
height dimensions.
</div>
</body>
</html>
Output:
Bootstrap 5 Overflow Example Output
Share your thoughts in the comments
Please Login to comment...