Bootstrap - Overflow

This chapter discusses about the overflow utility of Bootstrap. The overflow utility classes are used to control the behavior of overflowing content within an element.

Bootstrap provides several utility classes related to overflow. By default these classes are not responsive.

Class Description
.overflow-auto automatically adds the scrollbar to the element if the content exceeds the dimensions of the element.
.overflow-hidden hides the content when it exceeds the dimensions of the element.
.overflow-scroll adds the scrollbar to the element regardless of whether the content exceeds the dimensions of the element or not.
.overflow-visible allows the content to overflow the dimensions of the element without clipping or scrolling.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container p-3">
    <h4 class="text-start text-primary">
      Overflow utility example</h4>
    <div class="overflow-auto mt-3 pb-5 bg-light" 
     style="max-width: 360px; max-height: 80px;">
         <code>.overflow-auto</code> is a class applied 
        on an element with set width and height dimensions. 
          By design, this content will vertically scroll, if overflowing.
    </div>
    <div class="overflow-hidden mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-hidden</code> is a utility class that is applied
          on an element with set width and height dimensions. This will hide the contents, when overflowing.
    </div>
    <div class="overflow-visible mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-visible</code> is a utility class that is applied
          on an element with set width and height dimensions. This will not hide the contents, when overflowing.
    </div>
    <div class="overflow-scroll mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-scroll</code> is a utility class that is applied
          on an element with set width and height dimensions. This will always show a scroll bar irrespective of whether the content will overflow or not.
    </div>
    <div class="overflow-scroll mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-scroll</code> is a utility class that shows a scroll bar always.
    </div>
    </div>
  </body>
</html>

overflow-x

The overflow-x property is used to control the horizontal overflow behavior of an element. It determines what happens when the content within an element exceeds its width along the horizontal axis.

The overflow-x property can have the following values:

Class Description
.overflow-x-auto automatically adds the horizontal scrollbar to the element if the content exceeds the width of the element.
.overflow-x-hidden hides the content when it exceeds the width of the element along the horizontal axis.
.overflow-x-scroll adds the horizontal scrollbar to the element regardless of whether the content exceeds the width of the element or not.
.overflow-x-visible allows the content to overflow the dimensions of the element along the horizontal axis without clipping or scrolling.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container p-3">
        <h4>Overflow-x-* Example</h4>
        <div class="overflow-x-auto mt-3 pb-5"
        style="max-width: 340px; max-height: 90px;">
        <code>.overflow-x-auto</code> allows the users to scroll horizontally and view the overflowed content.
        </div>
        <div class="overflow-x-hidden mt-5 pb-5"
        style="max-width: 340px; max-height: 85px;">
        <code>.overflow-x-hidden</code> is a class applied 
        on an element with set width and height dimensions. 
        This will hide the contents, when overflowing, along the x-axis.
        </div>
        <div class="overflow-x-visible mt-5 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-x-visible</code> is a class applied 
        on an element with set width and height dimensions. 
        This will not hide the contents, even when overflowing, along the x-axis.
        </div>
        <div class="overflow-x-scroll mt-5 pb-5"
        style="max-width: 340px; max-height: 120px;">
        <code>.overflow-x-scroll</code> 
        This ensures that a horizontal scrollbar is always present, even if there is no actual overflow along the horizontal axis.
        </div>
    </div>
  </body>
</html>

overflow-y

The overflow-y property is used to control the vertical overflow behavior of an element. It determines what happens when the content within an element exceeds its height along the vertical axis.

The overflow-y property can have the following values:

Class Description
.overflow-y-auto automatically adds the vertical scrollbar to the element if the content exceeds the height of the element.
.overflow-y-hidden hides the content when it exceeds the height of the element along the vertical axis.
.overflow-y-scroll adds the vertical scrollbar to the element regardless of whether the content exceeds the height of the element or not.
.overflow-y-visible allows the content to overflow the dimensions of the element along the vertical axis without clipping or scrolling.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
        <h4>Overflow-y-* Example</h4>
        <div class="overflow-y-auto mt-3 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-auto</code> allows the users to scroll vertically and view the overflowed content. 
        In order to adjust the content, a vertical scroll bar should appear.
        </div>
        <div class="overflow-y-hidden mt-5 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-hidden</code> is a class applied 
        on an element with set width and height dimensions. 
        This will hide the contents, when overflowing, along the y-axis.
        </div>
        <div class="overflow-y-visible mt-5 pb-5"
        style="max-width: 340px; max-height: 70px;">
        <code>.overflow-y-visible</code> is a class applied 
        on an element with set width and height dimensions. 
        This will not hide the contents, even when overflowing, along the y-axis.
        </div>
        <div class="overflow-y-scroll mt-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-scroll</code> 
        This ensures that a vertical scrollbar is always present, even if there is no actual overflow along the vertical axis.
        </div>
    </div>
  </body>
</html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements