Bootstrap Position & Layout Patterns

Fixed Position

Fixed elements are removed from normal document flow and positioned relative to the viewport. They remain visible at their position regardless of scrolling.

Fixed Top Header

Use .fixed-top to keep an element at the top of the viewport.

Fixed Bottom Footer

Use .fixed-bottom to keep an element at the bottom of the viewport.

Production Code Example

<!-- Add to your stylesheet or <style> tag -->
<style>
  body {
    padding-top: 60px;    /* Height of fixed header */
    padding-bottom: 60px; /* Height of fixed footer */
  }
</style>

<!-- Fixed header -->
<header class="fixed-top bg-dark text-white p-3">
  Fixed Header
</header>

<!-- Fixed footer -->
<footer class="fixed-bottom bg-dark text-white p-3">
  Fixed Footer
</footer>

Sticky Position

Sticky elements toggle between relative and fixed positioning. They scroll with content until reaching a threshold, then "stick" in place. Unlike fixed, they remain in document flow.

Basic Sticky Navigation

Use .sticky-top to make an element stick to the top when scrolling past it.

Responsive Sticky Breakpoints

Apply sticky behavior only at certain breakpoints using .sticky-{breakpoint}-top.

Sticky Bottom

Use .sticky-bottom to stick elements to the bottom of their container.

Sticky Sidebar Pattern

Common pattern: sticky sidebar that remains visible while main content scrolls. Add custom top offset with inline style or utility class.

Clearfix

Use .clearfix to clear floated content within a container. This ensures the parent container wraps around floated children properly.

With Clearfix (Correct)

The container properly expands to contain the floated buttons.

This paragraph correctly appears below the container.

Without Clearfix (Broken Layout)

Without clearfix, the container collapses and subsequent content wraps around floats.

Without clearfix, this text wraps around the floats incorrectly!

Image Float Pattern

Classic pattern: float an image with text wrapping around it.

Text wraps around the floated image. The clearfix ensures the container properly encompasses both the floated image and the text content. This is a common pattern for article layouts with inline images.

Text Truncation

Use .text-truncate to truncate long text with an ellipsis. Requires display: block or display: inline-block and a defined width.

Block Level Truncation

Block elements truncate when they have a constrained width.

Inline Truncation

Inline elements require .d-inline-block for truncation to work.

Status: This is a very long inline status message

Table Cell Truncation

For table cells, use table-layout: fixed and define column widths.

Card with Truncated Content

Vertical Rule

Use .vr to create vertical dividers. Works best in flex containers where it automatically inherits the container height.

Basic Vertical Rule

In a flex container, .vr automatically stretches to match sibling height.

Vertical Divider Between Items

Button Toolbar with Vertical Rule

Use vertical rules to separate button groups within a toolbar.

Navigation with Vertical Dividers

Styled Vertical Rule

Customize with background color and opacity utilities.

Color & Background Helpers

Use .text-bg-{color} to set both background and contrasting text color automatically. This ensures proper color contrast for accessibility.

All Color Variants

Badges with Color Helpers

Apply to badges for consistent, accessible color combinations.

Custom Alert Pattern

Create alert-like components with guaranteed color contrast.

Card Headers with Color Helpers