Bootstrap 5 Overflow Last Updated : 06 Aug, 2024 Suggest changes Share Like Article Like Report Bootstrap 5 Overflow provides utility classes to manage overflow behavior within elements. Options include auto, hidden, visible, and scroll, allowing control over content display in constrained spaces, ensuring a better user experience and layout management.Overflow Classes in Bootstrap:Class NameDescriptionoverflow-autoAllows overflowing elements inside a div.overflow-hiddenForbids overflow of elements within a div.overflow-visibleAllows components inside the div to overflow.overflow-scrollEnables overflow with the assistance of a scrollbar.Syntax:<div class="overflow-*">...</div>Here, * will be the variable that could be replaced from the above-mentioned classes.Examples of Bootstrap 5 OverflowExample 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= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="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= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="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: B bhaveshrawat Follow Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Explore Bootstrap 5 Tutorial 6 min read Bootstrap 5 Introduction 4 min read LayoutBootstrap 5 Layout Breakpoints 3 min read Bootstrap 5 Layout Containers 3 min read BootStrap 5 Layout Grid System 3 min read Bootstrap 5 Columns 2 min read Bootstrap 5 Gutters 2 min read Bootstrap 5 Utilities 2 min read Bootstrap 5 Z-index 2 min read ContentBootstrap Reboot 2 min read Bootstrap 5 Typography 2 min read Bootstrap 5 Images 1 min read Bootstrap 5 Tables 2 min read Bootstrap 5 Figures 2 min read FormsBootstrap-5 Forms 2 min read Bootstrap 5 Form Controls 2 min read Bootstrap 5 Select 2 min read Bootstrap 5 Checks and Radios 2 min read Bootstrap 5 Range 2 min read Bootstrap 5 Input Group 3 min read Bootstrap 5 Floating labels 2 min read Forms LayoutBootstrap 5 Layout Forms 2 min read Bootstrap5 Layout Utilities 2 min read Bootstrap 5 Layout Form Grid 2 min read Bootstrap 5 Layout Gutters 2 min read Bootstrap 5 Layout Horizontal form 2 min read Bootstrap 5 Layout Horizontal form label sizing 2 min read Bootstrap 5 Layout Column sizing 2 min read Bootstrap 5 Layout Auto-sizing 2 min read Bootstrap 5 Layout Inline forms 2 min read Bootstrap 5 Validation 4 min read ComponentsBootstrap 5 Accordion 3 min read Bootstrap 5 Alerts 2 min read Bootstrap 5 Badges 2 min read Bootstrap Breadcrumb 2 min read Bootstrap 5 Buttons 3 min read Bootstrap 5 | Button group 4 min read Bootstrap 5 | Card 11 min read Bootstrap 5 Carousel 3 min read Bootstrap 5 | Close button 1 min read Bootstrap 5 Collapse 3 min read Bootstrap 5 Dropdowns 9 min read Bootstrap 5 List group 5 min read Bootstrap 5 Modal 7 min read NavbarBootstrap 5 Navbar Brand 3 min read Bootstrap 5 Navbar Brand Text 2 min read Bootstrap Navbar Brand Image 2 min read Bootstrap 5 Navbar Nav 2 min read Bootstrap 5 Navbar Forms 2 min read Bootstrap 5 Navbar Text 2 min read Bootstrap 5 Offcanvas 12 min read Bootstrap 5 Popovers 2 min read Bootstrap 5 Progress 5 min read Bootstrap 5 Scrollspy 4 min read Bootstrap 5 Spinners 3 min read Bootstrap 5 Toasts 3 min read Bootstrap 5 Tooltips 3 min read HelpersBootstrap 5 Clearfix 2 min read Bootstrap 5 Colored links 2 min read Bootstrap 5 Ratios 2 min read Bootstrap 5 Position 2 min read Bootstrap 5 Visually hidden 2 min read Bootstrap 5 Stretched link 2 min read Bootstrap 5 Text Truncation 2 min read ExtendBootstrap 5 Approach 3 min read Bootstrap 5 Icons 2 min read My Profile ${profileImgHtml} My Profile Edit Profile My Courses Join Community Transactions Logout Like