Borders, shadows, sizing and position

The last big group of utilities handles how a block looks and where it sits: borders and rounded corners, shadows, width and height, positioning. These are the same properties as in the tutorial — border, box-shadow, width, position — written as short classes.

Borders and rounding

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="border p-2 mb-2">Border on all sides</div>
<div class="border-bottom border-primary border-3 p-2 mb-2">Bottom only, blue, 3px thick</div>
<div class="border rounded-3 p-2 mb-2">Rounded corners</div>
<span class="border rounded-pill px-3 py-1">Pill label</span>

Shadows

shadow-sm is a light shadow, shadow a regular one, shadow-lg a deep one, and shadow-none removes it:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="d-flex gap-4 p-3">
  <div class="shadow-sm p-3 rounded">sm</div>
  <div class="shadow p-3 rounded">regular</div>
  <div class="shadow-lg p-3 rounded">lg</div>
</div>

The three blocks seem lifted above the page to different heights. shadow-sm suits dashboard cards, shadow-lg suits pop-up windows.

Sizing

w-25, w-50, w-75, w-100 and w-auto set the width as a percentage of the parent, h-* set the height. mw-100 keeps a block from getting wider than its parent, vh-100 and min-vh-100 stretch a block to the full window height. min-vh-100 usually goes on the admin dashboard page wrapper so that the sidebar reaches the bottom.

Positioning

position-relative and position-absolute together with top-*, start-*, end-*, bottom-* (values 0, 50 and 100 percent) place an element relative to its parent:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="position-relative border rounded p-4 mt-2" style="width: 180px">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle bg-danger text-white rounded-pill px-2">
    5
  </span>
</div>

The red circle with a number sits on the top right corner of the block: top-0 start-100 puts it at the corner, and translate-middle shifts it by half its size so that its center matches the corner.

Pinned blocks

fixed-top pins an element to the top of the window over the content; sticky-top sticks to the top while scrolling but first stays in its place. Both are often used on a site header.

Common mistake

Putting position-absolute on an element and forgetting position-relative on the parent. Then the element measures from the nearest positioned ancestor or the whole page and flies off to a corner of the screen. Always give the parent position-relative.