Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 Overflow

Improve Article
Save Article
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

When the content exceeds an element’s box, the overflow attribute indicates what should happen.If the content of an element is too large to fit within the defined region, this property indicates whether to clip the content or add scrollbars. 

Overflow Classes in Bootstrap:

  • overflow-auto: It Will allow the overflowing of elements inside div.
  • overflow-hidden: It forbids the overflow of elements within a div. 
  • overflow-visible: The components inside the div have an overflow. 
  • overflow-scroll: Overflow with the help of a scroll bar.

Syntax:

<div class="overflow-*">...</div>

Here, * will be the variable that could be replaced from the above-mentioned classes.

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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-center text-success">
      GeeksForGeeks</h1>
    <h2 class="text-center 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=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
    
<body>
    <h1 class="text-center text-success">
      GeeksForGeeks</h1>
    <h2 class="text-center 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:

 

References: https://getbootstrap.com/docs/5.0/utilities/overflow/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!