Position

Position values

Quick positioning classes are available, though they are not responsive.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-top">...</div>

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-bottom">...</div>

Sticky top

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.

<div class="sticky-top">...</div>

Responsive sticky top

Responsive variations also exist for .sticky-top utility.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">
	Stick to the top on viewports sized XXL (extra-extra-large) or wider
</div>

Sticky bottom

Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it.

<div class="sticky-bottom">...</div>

Responsive sticky bottom

Responsive variations also exist for .sticky-bottom utility.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">
	Stick to the bottom on viewports sized XXL (extra-extra-large) or wider
</div>

Arrange elements

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

Where property is one of:

• top - for the vertical top position
• start - for the horizontal left position (in LTR)
• bottom - for the vertical bottom position
• end - for the horizontal right position (in LTR)

Where position is one of:

• 0 - for 0 edge position
• 50 - for 50% edge position
• 100 - for 100% edge position

Result

Loading...

Live Editor

<div class="position-relative bd-example-position-utils">
	<div class="position-absolute top-0 start-0"></div>
	<div class="position-absolute top-0 end-0"></div>
	<div class="position-absolute top-50 start-50"></div>
	<div class="position-absolute bottom-50 end-50"></div>
	<div class="position-absolute bottom-0 start-0"></div>
	<div class="position-absolute bottom-0 end-0"></div>
</div>

Center elements

In addition, you can also center the elements with the transform utility class .translate-middle.

This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

Result

Loading...

Live Editor

<div class="position-relative bd-example-position-utils">
	<div class="position-absolute top-0 start-0 translate-middle"></div>
	<div class="position-absolute top-0 start-50 translate-middle"></div>
	<div class="position-absolute top-0 start-100 translate-middle"></div>
	<div class="position-absolute top-50 start-0 translate-middle"></div>
	<div class="position-absolute top-50 start-50 translate-middle"></div>
	<div class="position-absolute top-50 start-100 translate-middle"></div>
	<div class="position-absolute top-100 start-0 translate-middle"></div>
	<div class="position-absolute top-100 start-50 translate-middle"></div>
	<div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

Result

Loading...

Live Editor

<div class="position-relative bd-example-position-utils">
	<div class="position-absolute top-0 start-0"></div>
	<div class="position-absolute top-0 start-50 translate-middle-x"></div>
	<div class="position-absolute top-0 end-0"></div>
	<div class="position-absolute top-50 start-0 translate-middle-y"></div>
	<div class="position-absolute top-50 start-50 translate-middle"></div>
	<div class="position-absolute top-50 end-0 translate-middle-y"></div>
	<div class="position-absolute bottom-0 start-0"></div>
	<div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
	<div class="position-absolute bottom-0 end-0"></div>
</div>

Examples

Here are some real life examples of these classes:

Result

Loading...

Live Editor

<div class="bd-example-position-examples d-flex justify-content-around align-items-center">
	<button type="button" class="btn btn-primary position-relative">
		Mails{' '}
		<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">
			+99 <span class="visually-hidden">unread messages</span>
		</span>
	</button>

	<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
		Marker
		<svg
			width="1em"
			height="1em"
			viewBox="0 0 16 16"
			class="position-absolute top-100 start-50 translate-middle mt-1"
			fill="var(--bs-secondary)"
			xmlns="http://www.w3.org/2000/svg"
			aria-hidden="true"
		>
			<path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
		</svg>
	</div>

	<button type="button" class="btn btn-primary position-relative">
		Alerts
		<span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2">
			<span class="visually-hidden">unread messages</span>
		</span>
	</button>
</div>

You can use these classes with existing components to create new ones.

Result

Loading...

Live Editor

<div class="position-relative m-4 bd-example-position-examples">
	<div
		class="progress"
		role="progressbar"
		aria-label="Progress"
		aria-valuenow="50"
		aria-valuemin="0"
		aria-valuemax="100"
		style={{ height: '1px' }}
	>
		<div class="progress-bar" style={{ width: '50%' }}></div>
	</div>
	<button
		type="button"
		class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill"
		style={{ width: '2rem', height: '2rem' }}
	>
		1
	</button>
	<button
		type="button"
		class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill"
		style={{ width: '2rem', height: '2rem' }}
	>
		2
	</button>
	<button
		type="button"
		class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill"
		style={{ width: '2rem', height: '2rem' }}
	>
		3
	</button>
</div>