Bootstrap Display & Position — Display Property and Positioning

In this tutorial, you will learn about Bootstrap Display & Position. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap display utilities set the CSS display property for responsive visibility control. Position utilities manage element positioning with fixed, sticky, absolute, and relative classes.

What You'll Learn

You will learn how to use display utilities for responsive hide/show, understand position classes, work with fixed and sticky headers, and use z-index utilities.

Why It Matters

Controlling element visibility and position is essential for responsive navbars, sticky headers, and floating elements. DodaTech's documentation uses a sticky sidebar and a fixed top navbar.

Real-World Use

Doda Browser uses position-sticky for its category filter sidebar and position-fixed for the download banner that follows users as they scroll.

flowchart LR
    A[Borders & Shadows] --> B[Display & Position]
    B --> C[Display Utilities]
    B --> D[Position Classes]
    B --> E[Z-Index]
    C --> F[Responsive Visibility]
    D --> G[Fixed/Sticky]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style G fill:#22c55e,stroke:#16a34a,color:#fff

Display Utilities

Set any display value with d-* classes:

<div class="d-inline bg-primary text-white p-2">Inline</div>
<div class="d-inline bg-success text-white p-2">Inline</div>
<div class="d-inline-block bg-warning p-2" style="width: 100px;">Inline block</div>
<div class="d-block bg-info text-white p-2 mt-2">Block</div>
<hr>
<div class="d-flex justify-content-between bg-light p-3">
  <div class="bg-primary p-2">Flex item</div>
  <div class="bg-success p-2">Flex item</div>
</div>

Expected output: Elements displayed as inline, inline-block, block, and flex.

Responsive Display

Hide and show elements at specific breakpoints:

<div class="d-none d-md-block bg-primary text-white p-3">
  Visible on medium screens and above, hidden on small screens
</div>
<div class="d-block d-md-none bg-success text-white p-3">
  Visible on small screens only, hidden on medium and above
</div>

Expected output: The first block appears at md breakpoint and above, the second appears only below md.

Common responsive display patterns:

• d-none d-lg-block — hide on mobile, show on desktop
• d-block d-md-none — show on mobile, hide on desktop
• d-none — always hidden (useful for JavaScript toggles)

Print Display

Control visibility when printing:

<div class="d-print-none bg-warning p-3">
  This element is hidden when printing
</div>
<div class="d-none d-print-block bg-info p-3">
  This element only appears when printing
</div>

Expected output: In the browser, only the warning box appears. When printing, the warning box disappears and the info box appears.

Position Utilities

<div style="height: 200px; position: relative;" class="bg-light border p-3 mb-3">
  <div class="position-absolute top-0 start-0 bg-primary text-white p-2">
    Absolute top-start
  </div>
  <div class="position-absolute top-0 end-0 bg-success text-white p-2">
    Absolute top-end
  </div>
  <div class="position-absolute bottom-0 start-0 bg-warning p-2">
    Absolute bottom-start
  </div>
  <div class="position-absolute bottom-0 end-0 bg-danger text-white p-2">
    Absolute bottom-end
  </div>
</div>

Expected output: Four boxes positioned at the four corners of the container using absolute positioning.

Fixed and Sticky Positioning

<nav class="navbar fixed-top bg-dark navbar-dark">
  Fixed to the top (use with caution — adds body padding needed)
</nav>

<div class="position-sticky top-0 bg-primary text-white p-3" style="z-index: 100;">
  Sticky element that sticks to the top when scrolling
</div>

Expected output: The navbar stays at the top of the viewport. The sticky element scrolls until its top reaches the viewport top, then sticks.

When using fixed-top, add padding-top to the body to prevent content from hiding behind the fixed element:

body { padding-top: 56px; }

Translate Middle

Center elements vertically and horizontally:

<div style="height: 200px; position: relative;" class="bg-light border">
  <div class="position-absolute top-50 start-50 translate-middle bg-primary text-white p-3">
    Perfectly centered
  </div>
</div>

Expected output: A box centered both vertically and horizontally within its parent container.

Z-Index

<div style="position: relative; height: 150px;" class="bg-light">
  <div class="position-absolute p-3 bg-primary text-white" style="top: 20px; left: 20px; z-index: 2;">
    z-index 2 (on top)
  </div>
  <div class="position-absolute p-3 bg-success text-white" style="top: 40px; left: 40px; z-index: 1;">
    z-index 1 (behind)
  </div>
</div>

Expected output: The primary box appears above the success box despite being placed first because it has higher z-index.

Bootstrap also provides z-* utility classes: z-0, z-1, z-2, z-3, z-n1 (negative one).

Common Mistakes

1. Forgetting position: relative on Parent

Absolute positioned children need a positioned ancestor. Without position-relative on the parent, absolute children position relative to the viewport.

2. Fixed Elements Overlapping Content

Fixed elements are removed from the document flow. Add padding or margin to the body to prevent content from hiding behind fixed headers.

3. Using d-none and d-block Without Breakpoints

d-none hides an element at all sizes. Always pair with a breakpoint class like d-md-block to make it responsive.

4. Sticky Elements Not Sticking

Sticky positioning requires a top, bottom, left, or right value. Always add top-0 or similar to sticky elements.

5. Overlapping Z-Index Values

Complex layouts can create z-index stacking contexts. When z-index values compete, the element with the higher value in the same stacking context wins.

Practice Questions

1. What class hides an element on mobile but shows it on desktop? d-none d-lg-block hides on small screens and shows on large screens and above.

2. What is the difference between fixed and sticky positioning? Fixed elements stay at a position regardless of scrolling. Sticky elements scroll normally until they reach a threshold, then stick.

3. How do you center an element vertically and horizontally? Use position-absolute top-50 start-50 translate-middle on the element with a positioned parent.

4. What display utility produces a flex container? d-flex creates a Flexbox container.

5. How do you prevent fixed-top from overlapping page content? Add padding-top to the body element equal to the fixed navbar height (typically 56px).

Challenge

Create a page with a fixed top navbar, a sticky sidebar on the left, and a main content area. The sidebar should stick when scrolling. Use responsive display to hide the sidebar on mobile.

FAQ

Mini Project

Build a documentation page layout with a fixed top navbar, a sticky left sidebar (showing section links), and scrollable main content. Use responsive display to hide the sidebar on tablet and mobile.

What's Next

Master Flex Utilities for flexible box layouts. Then explore Images and Figures for responsive media.