Bootstrap 5 Position, Display, Visibility, Sizing & Shadows

Fine-tuning UI layouts requires precise control over CSS positioning (fixed, sticky, absolute), display behavior (showing or hiding elements based on device breakpoint), dimensions (w-100, h-100), and depth shadows. Bootstrap 5 provides modular classes for all of these properties.

1. Responsive Display Utilities (Show / Hide by Screen Size)

Control element visibility across mobile, tablet, and desktop without custom media queries:

<!-- Visible ONLY on mobile smartphones, hidden on md+ -->
<div class="d-block d-md-none bg-warning p-2">Visible on Mobile Only</div>

<!-- Hidden on mobile, visible on tablet and desktop -->
<div class="d-none d-md-block bg-info text-white p-2">Visible on Tablet & Desktop Only</div>

2. Positioning: Sticky Top & Fixed Bottom

<!-- Stays at top of viewport once scrolled past -->
<div class="sticky-top bg-light p-3 border-bottom">Sticky Header</div>

<!-- Permanently locked to the bottom edge of screen -->
<div class="fixed-bottom bg-dark text-white p-3 text-center">Fixed Footer Bar</div>

3. Box Shadows (Elevation & Depth)

Add material elevation to cards and buttons with shadow utilities:

<div class="shadow-none p-3 mb-3 bg-light rounded">No Shadow (.shadow-none)</div>
<div class="shadow-sm p-3 mb-3 bg-white rounded">Small Subtle Shadow (.shadow-sm)</div>
<div class="shadow p-3 mb-3 bg-white rounded">Regular Shadow (.shadow)</div>
<div class="shadow-lg p-3 mb-3 bg-white rounded">Large Elevated Shadow (.shadow-lg)</div>