.overflow-auto on an element with set width and
height dimensions. By design, this content will vertically scroll.
.overflow-hidden on an element with set width and
height dimensions.
.overflow-visible on an element with set width and
height dimensions.
.overflow-scroll on an element with set width and
height dimensions.
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-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 mb-3 mb-md-0 me-md-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>
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-visible</code> on an element with set width and height
dimensions.
</div>
<div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-scroll</code> on an element with set width and height
dimensions.
</div>
</div>.overflow-x-auto example on an element.overflow-x-hidden example.overflow-x-visible example.overflow-x-scroll example on an element <div class="d-md-flex">
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space:
nowrap;">
<div><code>.overflow-x-auto</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space:
nowrap;">
<div><code>.overflow-x-hidden</code> example</div>
<div>on an element with set width and height
dimensions.</div>
</div>
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space:
nowrap;">
<div><code>.overflow-x-visible</code> example </div>
<div>on an element with set width and height
dimensions.</div>
</div>
<div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space:
nowrap;">
<div><code>.overflow-x-scroll</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
</div> .overflow-y-auto example on an element with set width and height dimensions.
.overflow-y-hidden example on an element with set width and height dimensions.
.overflow-y-visible example on an element with set width and height dimensions.
.overflow-y-scroll example on an element with set width and height dimensions.
<div class="bd-example d-md-flex">
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-auto</code> example on an element with set width and
height dimensions.
</div>
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-hidden</code> example on an element with set width and
height dimensions.
</div>
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3
bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-visible</code> example on an element with set width and
height dimensions.
</div>
<div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-scroll</code> example on an element with set width and
height dimensions.
</div>
</div>