Display & Flex Utilities

Not every layout needs the full grid. A toolbar, a row of buttons, a price aligned to the right, a login box centred on the screen: these are quicker with Bootstrap's display and flex utilities. They are thin wrappers around the CSS properties you already know, written as class names.

In this lesson you will hide and show elements at different screen sizes, arrange items with flexbox classes, use stacks, and position elements such as notification dots.

Display classes

The display classes set the CSS display property:

Add a breakpoint to make them responsive: d-{breakpoint}-{value}, for example d-md-none. Because Bootstrap is mobile-first, you combine a small-screen class with a larger-screen class:

• Hide on phones, show from md: d-none d-md-block
• Show on phones only: d-md-none
• Hide when printing: d-print-none (great for navigation and buttons on an invoice page)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive display</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-3">
    <p class="p-2 bg-warning-subtle d-md-none">You are on a small screen: call us at 98765 43210.</p>
    <p class="p-2 bg-info-subtle d-none d-md-block">You are on a medium or larger screen: chat with us online.</p>
    <p class="p-2 bg-success-subtle d-none d-xl-block">Extra large screen: here is our full branch map.</p>
    <button type="button" class="btn btn-primary d-print-none" id="printBtn">Print this page</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.getElementById("printBtn").addEventListener("click", () => window.print());
  </script>
</body>
</html>

Resize the result panel to see different messages appear. Note that d-none hides content from everyone, including screen readers. To hide something visually but keep it for screen readers, use visually-hidden instead (see Accessibility).

Flex utilities

Add d-flex to a parent, and its children line up in a row. Then the flex classes control direction, alignment and wrapping. They map directly to the properties from CSS Flexbox:

All of them have responsive versions, such as flex-md-row or justify-content-lg-between.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex utilities</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-3">
    <!-- 1. Toolbar: title on the left, actions on the right -->
    <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
      <h1 class="h5 mb-0">Orders</h1>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
        <button type="button" class="btn btn-sm btn-primary">New order</button>
      </div>
    </div>

    <!-- 2. Stack on phones, row from md -->
    <div class="d-flex flex-column flex-md-row gap-3 mb-3">
      <div class="p-3 border rounded flex-fill">Today: ₹18,400</div>
      <div class="p-3 border rounded flex-fill">This week: ₹96,250</div>
      <div class="p-3 border rounded flex-fill">Pending: 7</div>
    </div>

    <!-- 3. Media object: fixed image, flexible text -->
    <div class="d-flex align-items-start gap-3 p-3 border rounded">
      <img src="https://course.ethicscomputer.in/assets/samples/avatar.svg" alt="" width="56" height="56" class="rounded-circle flex-shrink-0">
      <div class="flex-grow-1">
        <p class="fw-semibold mb-1">Meera Nair</p>
        <p class="mb-0 text-body-secondary">Ordered 2 kg of banana chips and a box of halwa. Delivery to Kochi, Kadavanthra.</p>
      </div>
      <span class="ms-auto text-success fw-semibold">₹740</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Three patterns you will use again and again:

1. Space between: justify-content-between pushes the title to one end and the buttons to the other.
2. Responsive direction: flex-column flex-md-row stacks the boxes on phones and lines them up from tablets. flex-fill makes them share the width equally.
3. Media object: an image that must not shrink (flex-shrink-0) beside text that takes the remaining space (flex-grow-1). ms-auto pushes the price to the far end.

Stacks: quick vertical and horizontal layouts

Bootstrap adds two shortcuts. vstack makes a vertical flex column, and hstack makes a horizontal row with items centred vertically. Both work well with gap-*. The vr class draws a thin vertical divider inside an hstack.

<div class="hstack gap-3">
  <span>Rohan Gupta</span>
  <div class="vr"></div>
  <span>Pune</span>
  <button class="btn btn-sm btn-outline-primary ms-auto">Follow</button>
</div>

<div class="vstack gap-2 col-md-4 mx-auto">
  <button class="btn btn-primary">Pay with UPI</button>
  <button class="btn btn-outline-secondary">Pay with card</button>
</div>

Centring anything

The classic question "how do I centre a div vertically?" has a short Bootstrap answer: make the parent a flex container with some height, then centre on both axes.

<div class="d-flex justify-content-center align-items-center min-vh-100 bg-body-tertiary">
  <div class="p-4 bg-body border rounded shadow-sm">Login box, centred on the screen</div>
</div>

min-vh-100 gives the parent at least the full screen height, so there is room to centre in.

Position helpers

For small decorations you sometimes need absolute positioning. Bootstrap has position-relative, position-absolute, position-fixed and position-sticky, plus edge classes top-0, top-50, top-100, start-0, start-50, start-100 (and bottom-*, end-*), and translate-middle to centre an element on a point.

<button class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger rounded-circle">
    <span class="visually-hidden">New messages</span>
  </span>
</button>

The red dot is placed at the top-right corner of the button and centred on that corner. Shortcuts fixed-top, fixed-bottom and sticky-top are mainly used for navigation bars.

Common mistakes

• Writing d-md-block without d-none. The element is already visible on small screens, so nothing is hidden. Hiding needs d-none first.
• Forgetting d-flex. justify-content-between and align-items-center do nothing on a normal block element.
• Vertical centring without height. align-items-center needs a parent taller than its content; use min-vh-100 or a fixed height.
• Absolute positioning without a positioned parent. Add position-relative to the parent, or the element positions itself against the whole page.

Key points

• d-* classes set display, and d-{breakpoint}-* changes it per screen size; d-none d-md-block hides on phones only.
• d-flex plus justify-content-* and align-items-* handles most small layouts.
• flex-column flex-md-row is the standard way to stack on phones and line up on larger screens.
• vstack, hstack and gap-* give quick vertical and horizontal layouts.
• Position classes such as position-absolute top-0 start-100 translate-middle place badges and dots precisely.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lucknow Cricket Club</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <header class="container d-flex justify-content-between align-items-center py-3 border-bottom">
    <span class="fs-5 fw-bold">Lucknow Cricket Club</span>
    <nav class="d-none d-md-flex gap-3">
      <a href="#fixtures">Fixtures</a>
      <a href="#players">Players</a>
      <a href="#join">Join</a>
    </nav>
    <button type="button" class="btn btn-outline-secondary btn-sm d-md-none">Menu</button>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>