Bootstrap - Overflow

Quiz

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.



  
    Bootstrap - Overflow
    
    
    
    
    
  
  
    
    
      Overflow utility example
    
         .overflow-auto is a class applied 
        on an element with set width and height dimensions. 
          By design, this content will vertically scroll, if overflowing.
    
    
         .overflow-hidden is a utility class that is applied
          on an element with set width and height dimensions. This will hide the contents, when overflowing.
    
    
         .overflow-visible is a utility class that is applied
          on an element with set width and height dimensions. This will not hide the contents, when overflowing.
    
    
         .overflow-scroll 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.
    
    
         .overflow-scroll is a utility class that shows a scroll bar always.

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.



  
    Bootstrap - Overflow
    
    
    
    
    
  
  
    
        Overflow-x-* Example
        
        .overflow-x-auto allows the users to scroll horizontally and view the overflowed content.
        
        
        .overflow-x-hidden is a class applied 
        on an element with set width and height dimensions. 
        This will hide the contents, when overflowing, along the x-axis.
        
        
        .overflow-x-visible 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.
        
        
        .overflow-x-scroll 
        This ensures that a horizontal scrollbar is always present, even if there is no actual overflow along the horizontal axis.

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.



  
    Bootstrap - Overflow
    
    
    
    
    
  
  
    
        Overflow-y-* Example
        
        .overflow-y-auto allows the users to scroll vertically and view the overflowed content. 
        In order to adjust the content, a vertical scroll bar should appear.
        
        
        .overflow-y-hidden is a class applied 
        on an element with set width and height dimensions. 
        This will hide the contents, when overflowing, along the y-axis.
        
        
        .overflow-y-visible 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.
        
        
        .overflow-y-scroll 
        This ensures that a vertical scrollbar is always present, even if there is no actual overflow along the vertical axis.

Print Page