Overflow

React Bootstrap 5 Overflow component

Use these shorthand utilities for quickly configuring how content overflows an element.

Basic example

Barebones overflow functionality is provided for two values by default, and they are not responsive.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions. 
        
            
            import React from 'react';
            
            export default function App() {
              return (
                <>       
                  <div className="overflow-auto">...</div>
                  <div className="overflow-hidden">...</div>
                  <div className="overflow-visible">...</div>
                  <div className="overflow-scroll">...</div>
                </>
              );
            }

Using Sass variables, you may customize the overflow utilities by changing the $overflows variable in _variables.scss.

More examples

Showing content that overflows

Hide or show overflowing content using the .overflow-visible or .overflow-hidden classes.

Overflow visible

Overflow hidden

        
            
                import React from 'react';
                  
                export default function App() {
                  return (
                    <>       
                      <div className="overflow-visible">...</div>
                      <div className="overflow-hidden">...</div>
                    </>
                  );
                }

Scrolling if needed

Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque animi autem cum assumenda perferendis iusto doloribus voluptate, quo exercitationem. Aliquid, provident non magnam quia repudiandae molestias dicta sed tenetur soluta quas minus eaque. Praesentium est commodi tempora laborum voluptatem, quis vitae aut perferendis facere expedita, dolores nisi ipsam necessitatibus soluta, natus itaque numquam illo animi eveniet non iure cum. Deserunt corrupti eaque vel modi debitis rerum libero deleniti facilis dolorum sequi! Nobis eum fugiat ipsa quaerat iste repellendus laboriosam. 
        
            
                import React from 'react';
                  
                export default function App() {
                  return (
                    <div className="overflow-auto">...</div>
                  );
                }

Scrolling always

Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque animi autem cum assumenda perferendis iusto doloribus voluptate, quo exercitationem. Aliquid, provident non magnam quia repudiandae molestias dicta sed tenetur soluta quas minus eaque. Praesentium est commodi tempora laborum voluptatem, quis vitae aut perferendis facere expedita, dolores nisi ipsam necessitatibus soluta, natus itaque numquam illo animi eveniet non iure cum. Deserunt corrupti eaque vel modi debitis rerum libero deleniti facilis dolorum sequi! Nobis eum fugiat ipsa quaerat iste repellendus laboriosam. 
        
            
                import React from 'react';
                  
                export default function App() {
                  return (
                    <div className="overflow-scroll">...</div>
                  );
                }

Scrolling horizontally always

Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque animi autem cum assumenda perferendis

        
            
                import React from 'react';
                  
                export default function App() {
                  return (
                    <div className="overflow-x-scroll">...</div>
                  );
                }

Scrolling vertically always

Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque animi autem cum assumenda perferendis

        
            
                import React from 'react';
                    
                export default function App() {
                  return (
                    <div className="overflow-y-scroll">...</div>
                  );
                }