❮ Previous Next ❯

Visibility Utilities

  • Show and hide elements responsively using Bootstrap utilities.

  • Introduction to Visibility & Overflow

    In UI development, not everything should always be visible, and not all content should always be fully shown.

    You often need to:

    • Temporarily hide elements

    • Control whether hidden elements still take space

    • Handle overflowing content inside containers

    In Bootstrap 5, visibility utilities and overflow utilities help manage these situations without writing custom CSS.

    Visibility Utilities

    What Are Visibility Utilities ?

    Visibility utilities control whether an element is visible or hidden, without removing it from the document layout.

    These utilities map to the CSS visibility property.

    CSS equivalent:

    visibility: hidden;

    Bootstrap equivalent:

    <div class="invisible"></div>

    Visibility Utility Classes

    ClassCSS Effect
    visiblevisibility: visible
    invisiblevisibility: hidden

    Visible vs Invisible

Invisible Element

Use the invisible class to hide an element while still keeping its space in the layout. 

<div class="invisible bg-warning p-3">
  Hidden but space is reserved
</div>

  • Behavior:

    • Element is not visible

    • Space is still occupied

    • Layout does NOT shift

Visible Element

Use the visible class to make an element visible within the layout. 

<div class="visible bg-success p-3">
  Visible element
</div>

  • Visibility vs Display

    Many beginners confuse visibility with display.

Invisible Element

Visibility utilities hide elements without removing their layout space, unlike display utilities. 

<!-- Visibility Hidden -->
<div class="invisible">Hidden</div>

    • Element is hidden

    • Space remains

Display None

Use d-none to completely hide an element and remove it from the layout. 

<div class="d-none">Removed</div>

    • Element is removed from layout

    • Space is not reserved

    Use:

    • invisible → temporary hiding without layout change

    • d-none → remove element completely

      When to Use Visibility Utilities

      Use visibility utilities when:

      • You want to hide content temporarily

      • You want to preserve layout spacing

      • You are toggling UI states visually

      Avoid using visibility utilities for:

      • Responsive hiding (use display utilities instead)

      Overflow Utilities

      What Is Overflow ?

      Overflow controls what happens when content exceeds its container size.

      CSS equivalent:

      overflow: hidden;

      Bootstrap provides utility classes for overflow handling.

      Overflow Utility Classes

      ClassEffect
      overflow-autoScrollbars appear when needed
      overflow-hiddenExtra content is hidden
      overflow-visibleContent spills outside
      overflow-scrollAlways shows scrollbars

    Overflow Hidden

    Use overflow-hidden to hide any content that exceeds the container’s boundaries. 

    <div class="overflow-hidden border" style="height: 100px;">
  Very long content that will be clipped and not visible outside the box.
</div>

    • Used when:

      • Preventing layout break

      • Cropping content visually

    Overflow Auto

    Use overflow-auto to automatically add scrollbars when content exceeds the container size. 

    <div class="overflow-auto border" style="height: 100px;">
  Very long content that will scroll when it exceeds the container height.
</div>

    • Used for:

      • Scrollable sections

      • Chat boxes

      • Dropdown content

      • Modal bodies

    Overflow Scroll

    Use overflow-scroll to always display scrollbars when content overflows the container. 

    <div class="overflow-scroll border" style="height: 100px;">
  Content always shows scrollbars.
</div>

    • Used when:

      • Consistent scrollbar visibility is required

    Overflow Visible

    Use overflow-visible to allow content to overflow outside the container. 

    <div class="overflow-visible border" style="height: 100px;">
  Content can overflow outside the container.
</div>

    • Default behavior, rarely set explicitly.

      Directional Overflow Utilities

      Bootstrap also supports axis-specific overflow.

    Directional Overflow

    Use axis-specific overflow utilities to control horizontal or vertical scrolling in a container. 

    <!-- Horizontal Overflow -->
<div class="overflow-x-auto" style="width: 150px;">
  Very wide content that scrolls horizontally.
</div>

<!-- Vertical Overflow -->
<div class="overflow-y-auto" style="height: 100px;">
  Very tall content that scrolls vertically.
</div>

    • Used commonly in:

      • Tables

      • Code blocks

      • Side panels

    Visibility and Overflow

    Combine visibility and overflow utilities to control how hidden content behaves inside a container. 

    <div class="overflow-hidden invisible">
  Hidden content that still takes space
</div>

    • This:

      • Hides content visually

      • Preserves layout

      • Prevents overflow

      Common Mistakes

      • Using invisible instead of d-none

      • Hiding important content unintentionally

      • Forgetting to set container height for overflow

      • Using overflow utilities without UX consideration

      • Forcing scrollbars unnecessarily

      Best Practices for Visibility & Overflow

      • Use invisible only when layout space must remain

      • Use d-none for responsive visibility control

      • Use overflow-auto instead of overflow-scroll

      • Always test overflow on small screens

      • Avoid hiding critical content

    ❮ Previous Next ❯