Bootstrap Overflow Utilities

When you have a fixed-size box (like a container with a strict height) but the text or images inside it are too large to fit naturally, the content will "overflow". Bootstrap provides four simple utility classes to dictate exactly how the browser should handle this excess format data.

The Overflow Behaviors

.overflow-auto: The standard and most common choice. It tracks the content and applies a scrollbar only if necessary (if the content exceeds the box).
.overflow-hidden: It simply cuts off the extra content like scissors. Anything past the boundary is completely invisible, and no scrollbar is provided.
.overflow-visible: The default browser behavior. The text ignores the box entirely and visually "bleeds" out past the boundaries, overlapping whatever sits below it.
.overflow-scroll: Forces a scrollbar track to appear permanently, even if the content inside fits perfectly and doesn't explicitly need one.

Overflow in Action

Here are four identical boxes. Each one has a strict CSS height of 150 pixels, but they all contain identical amounts of huge text that clearly needs more space than 150px. See how each class reacts!

.overflow-auto

This is a very long block of dummy text. It is designed specifically to take up more space than the container allows. Because we are using the 'overflow-auto' class, the browser realizes the text is too long and automatically injects a nice vertical scrollbar so you can scroll down to read the rest!

.overflow-hidden

This is a very long block of dummy text. It is designed specifically to take up more space than the container allows. Because we are using the 'overflow-hidden' class, the extra text is instantly chopped off. You cannot scroll, so the rest of the text is lost completely over the edge!

.overflow-scroll

This is exactly like 'overflow-auto', except the scrollbar is permanently locked into place. Even if this text was incredibly short, the empty scrollbar track would firmly remain bolted onto the right side of this element!

.overflow-visible

This is the standard, unstyled HTML behavior. The containing box is only 150px tall, but because 'overflow-visible' allows the content to escape, this text drops directly out of the bottom of the container and violently bleeds over the rest of the webpage elements! If we didn't add extra margin to this demo row, it would crash into the footer of our layout!

<!-- Automatically provides a scrollbar only if the text is too long -->
<div class="overflow-auto" style="max-height: 200px;">...</div>

<!-- Chops whatever escapes to make it invisible -->
<div class="overflow-hidden" style="max-height: 200px;">...</div>

<!-- Forces a scrollbar to appear permanently -->
<div class="overflow-scroll" style="max-height: 200px;">...</div>

« Previous Lesson Next Lesson »