Open In App

Bootstrap 5 Overflow

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 09 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads