Open In App

Bootstrap 5 Overflow

Last Updated : 06 Aug, 2024
Suggest changes
Share
Like Article
Like
Report

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 NameDescription
overflow-autoAllows overflowing elements inside a div.
overflow-hiddenForbids overflow of elements within a div.
overflow-visibleAllows components inside the div to overflow.
overflow-scrollEnables 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/[email protected]/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:

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/[email protected]/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:


B
bhaveshrawat
Article Tags :

Explore

Lightbox