Scroll div

Bootstrap 5 Scroll div component

Responsive Scroll div built with Bootstrap 5. Use these shorthand utilities for quickly configuring how content overflows an element.

Basic example

Use the .overflow-auto class if you want a scroll in your div.

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.
Edit in sandbox 
        
            
                <div class="overflow-auto p-3 bg-body-tertiary" 
                 style="max-width: 260px; max-height: 100px;">
                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-body-tertiary" 
                style="max-width: 260px; max-height: 100px;">
               This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
               </div>

Overflow with image

Put an image into a div with the class .overflow-auto and a fixed size to get an image that can be scrolled.

Mountains in the Clouds
Mountains in the Clouds
Edit in sandbox 
        
            
                <div class="overflow-auto" style="max-width: 300px; max-height: 250px;">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp" 
                    class="w-100 shadow-1-strong rounded mb-4" alt="Mountains in the Clouds" />
                </div>
                <div class="overflow-hidden" style="max-width: 300px; max-height: 250px;">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp" 
                    class="w-100 shadow-1-strong rounded mb-4" alt="Mountains in the Clouds" />
                </div>