Bootstrap 5 Framework

Position and Sizing Utilities

13 min Lesson 36 of 40

Position and Sizing Utilities

Bootstrap provides comprehensive utilities for positioning elements and controlling their size. These utilities help you create complex layouts and control element dimensions without custom CSS.

Position Utilities

Control element positioning with position utility classes:

<!-- Position Classes -->
<div class="position-static">
    Static positioning (default, normal document flow)
</div>

<div class="position-relative">
    Relative positioning (positioned relative to normal position)
    <div class="position-absolute top-0 start-0">
        Absolute child (positioned relative to this parent)
    </div>
</div>

<div class="position-absolute top-50 start-50">
    Absolute positioning (relative to nearest positioned ancestor)
</div>

<div class="position-fixed bottom-0 end-0">
    Fixed positioning (relative to viewport)
</div>

<div class="position-sticky top-0">
    Sticky positioning (toggles between relative and fixed)
</div>

<!-- Responsive Positioning -->
<div class="position-relative position-md-absolute">
    Relative on mobile, absolute on desktop
</div>
        

Note: Position utilities are not responsive by default in Bootstrap 5, but you can create responsive classes using custom CSS or Sass.

Position Helpers

Use helper classes to position elements at specific locations:

<!-- Edge Positioning -->
<div class="position-relative" style="height: 200px; background: #f8f9fa;">
    <div class="position-absolute top-0 start-0">Top Left</div>
    <div class="position-absolute top-0 end-0">Top Right</div>
    <div class="position-absolute bottom-0 start-0">Bottom Left</div>
    <div class="position-absolute bottom-0 end-0">Bottom Right</div>
</div>

<!-- Centered Positioning -->
<div class="position-relative" style="height: 200px;">
    <div class="position-absolute top-50 start-50">
        50% from top and left (not centered)
    </div>
</div>

<div class="position-relative" style="height: 200px;">
    <div class="position-absolute top-50 start-50 translate-middle">
        Perfectly centered
    </div>
</div>

<!-- Translate Utilities -->
<div class="position-absolute top-0 start-50 translate-middle-x">
    Centered horizontally only
</div>

<div class="position-absolute top-50 start-0 translate-middle-y">
    Centered vertically only
</div>

<!-- 100% Edge Positioning -->
<div class="position-absolute top-0 start-0 end-0">
    Full width at top
</div>

<div class="position-absolute top-0 bottom-0 start-0">
    Full height on left side
</div>

<div class="position-absolute top-0 start-0 bottom-0 end-0">
    Full coverage (all edges)
</div>
        

Tip: Use translate-middle with top-50 start-50 to perfectly center an absolutely positioned element.

Width Utilities

Control element width with percentage-based utilities:

<!-- Percentage Width -->
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto (natural width)</div>

<!-- Max Width -->
<div class="mw-100">Max width 100%</div>

<!-- Viewport Width -->
<div class="vw-100">
    100% of viewport width (may overflow container)
</div>

<!-- Min Viewport Width -->
<div class="min-vw-100">
    Minimum 100% of viewport width
</div>

<!-- Practical Example: Image Container -->
<div class="w-75 mx-auto">
    <img src="image.jpg" class="w-100" alt="Responsive image">
</div>

<!-- Responsive Width -->
<div class="w-100 w-md-75 w-lg-50">
    100% on mobile, 75% on tablet, 50% on desktop
</div>
        

Height Utilities

Control element height with percentage and viewport-based utilities:

<!-- Percentage Height -->
<div style="height: 400px; background: #f8f9fa;">
    <div class="h-25 bg-primary">Height 25%</div>
    <div class="h-50 bg-success">Height 50%</div>
    <div class="h-75 bg-warning">Height 75%</div>
</div>

<div class="h-100">Height 100% (of parent)</div>
<div class="h-auto">Height auto (natural height)</div>

<!-- Max Height -->
<div class="mh-100">Max height 100%</div>

<!-- Viewport Height -->
<div class="vh-100">
    100% of viewport height (full screen)
</div>

<div class="min-vh-100">
    Minimum 100% of viewport height
</div>

<!-- Common Use Cases -->
<!-- Full Screen Hero Section -->
<section class="vh-100 d-flex align-items-center justify-content-center">
    <div class="text-center">
        <h1>Welcome</h1>
    </div>
</section>

<!-- Sidebar Layout -->
<div class="d-flex">
    <aside class="vh-100" style="width: 250px;">Sidebar</aside>
    <main class="flex-fill">Main content</main>
</div>
        

Note: Percentage height only works when the parent element has a defined height. Use vh-100 for viewport-relative heights.

Combined Width and Height

Examples of combining width and height utilities:

<!-- Square Elements -->
<div class="w-25" style="aspect-ratio: 1/1;">
    Square (using CSS aspect-ratio)
</div>

<!-- Fixed Aspect Ratio Box -->
<div class="position-relative w-100" style="padding-bottom: 56.25%;">
    <div class="position-absolute top-0 start-0 w-100 h-100">
        16:9 aspect ratio container
    </div>
</div>

<!-- Card with Fixed Height -->
<div class="card w-100" style="height: 300px;">
    <div class="card-body d-flex flex-column">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text flex-grow-1">Content</p>
        <button class="btn btn-primary mt-auto">Action</button>
    </div>
</div>

<!-- Full Screen Modal Backdrop -->
<div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50">
    Modal backdrop
</div>
        

Overflow Utilities

Control how content behaves when it exceeds element boundaries:

<!-- Overflow Auto (shows scrollbar when needed) -->
<div class="overflow-auto" style="max-height: 200px;">
    Long content that will scroll...
</div>

<!-- Overflow Hidden (clips content) -->
<div class="overflow-hidden" style="height: 100px;">
    Content is clipped, no scrollbar
</div>

<!-- Overflow Visible (default, content can overflow) -->
<div class="overflow-visible">
    Content can extend beyond boundaries
</div>

<!-- Overflow Scroll (always shows scrollbar) -->
<div class="overflow-scroll" style="height: 200px;">
    Always has scrollbar
</div>

<!-- X and Y Axis Control -->
<div class="overflow-x-auto overflow-y-hidden">
    Horizontal scroll, vertical clipped
</div>

<div class="overflow-x-hidden overflow-y-auto">
    Horizontal clipped, vertical scroll
</div>

<!-- Text Overflow Example -->
<div class="overflow-hidden text-nowrap text-truncate" style="max-width: 200px;">
    Very long text that will be truncated with ellipsis
</div>

<!-- Scrollable Table -->
<div class="overflow-auto">
    <table class="table">
        <!-- Wide table content -->
    </table>
</div>
        

Tip: Use overflow-auto for responsive content containers that may need scrolling on smaller screens.

Practical Positioning Examples

Real-world examples combining position and sizing utilities:

<!-- Notification Badge -->
<div class="position-relative d-inline-block">
    <button class="btn btn-primary">
        Notifications
    </button>
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
    </span>
</div>

<!-- Overlay Image Text -->
<div class="position-relative">
    <img src="image.jpg" class="w-100" alt="Background">
    <div class="position-absolute bottom-0 start-0 w-100 p-3 bg-dark bg-opacity-75 text-white">
        <h3>Image Caption</h3>
        <p>Description text</p>
    </div>
</div>

<!-- Fixed Bottom Button -->
<button class="btn btn-primary position-fixed bottom-0 end-0 m-3">
    Scroll to Top
</button>

<!-- Sticky Header -->
<header class="position-sticky top-0 bg-white shadow-sm" style="z-index: 1000;">
    <nav class="container">
        Navigation content
    </nav>
</header>

<!-- Card with Corner Badge -->
<div class="card position-relative">
    <span class="position-absolute top-0 end-0 badge bg-success m-2">
        New
    </span>
    <img src="product.jpg" class="card-img-top" alt="Product">
    <div class="card-body">
        <h5 class="card-title">Product Name</h5>
    </div>
</div>

<!-- Loading Overlay -->
<div class="position-relative">
    <div class="content">Main content</div>
    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-75">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>

<!-- Split Screen Layout -->
<div class="vh-100 d-flex">
    <div class="w-50 bg-primary text-white d-flex align-items-center justify-content-center">
        <h1>Left Side</h1>
    </div>
    <div class="w-50 d-flex align-items-center justify-content-center">
        <h1>Right Side</h1>
    </div>
</div>
        

Z-Index Utilities

Control stacking order of positioned elements:

<!-- Z-Index Classes -->
<div class="position-relative">
    <div class="position-absolute z-n1">Behind (z-index: -1)</div>
    <div class="position-absolute z-0">Base (z-index: 0)</div>
    <div class="position-absolute z-1">Level 1 (z-index: 1)</div>
    <div class="position-absolute z-2">Level 2 (z-index: 2)</div>
    <div class="position-absolute z-3">Level 3 (z-index: 3)</div>
</div>

<!-- Dropdown with Proper Z-Index -->
<div class="position-relative">
    <button class="btn btn-primary">Open Menu</button>
    <div class="position-absolute top-100 start-0 z-3 bg-white shadow">
        Dropdown content (appears above other elements)
    </div>
</div>

<!-- Modal Backdrop -->
<div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 z-2">
    Backdrop
</div>
<div class="position-fixed top-50 start-50 translate-middle z-3">
    Modal (above backdrop)
</div>
        

Note: Bootstrap's z-index utilities range from z-n1 to z-3. For custom values, use inline styles or custom CSS.

Practice Exercise

Create a product card with the following features:

Card with fixed height of 400px and width of 300px
Product image that fills the top half
"Sale" badge positioned at top-right corner
Product details in the bottom half with scrollable overflow
"Add to Cart" button fixed at the bottom of the card
Hover effect that shows an overlay with product details

Common Mistakes:

Using percentage height without a parent with defined height
Forgetting position-relative on parent when using absolute children
Not setting z-index for overlapping positioned elements
Using vh-100 on mobile without accounting for browser chrome
Forgetting to add translate-middle when centering with top-50/start-50