Bootstrap Utilities - Flexbox Centering Patterns

Horizontal Centering

Using justify-content-center

Centered

.d-flex .justify-content-center

Using mx-auto

Centered with mx-auto

.d-flex with child .mx-auto

Multiple Items Centered

One

Two

Three

.d-flex .justify-content-center .gap-3

Vertical Centering

Using align-items-center

Vertically Centered

.d-flex .align-items-center (container needs height)

Using my-auto

my-auto in flex-column

.d-flex .flex-column with child .my-auto

Perfect Centering (Both Axes)

Method 1: justify-content + align-items

Perfectly Centered

.d-flex .justify-content-center .align-items-center

Method 2: m-auto

m-auto

.d-flex with child .m-auto

Full Viewport Centering

Hero Section

Centered in viewport

.d-flex .justify-content-center .align-items-center .min-vh-100

Space Distribution

Space Between

Left

Right

.d-flex .justify-content-between

Space Around

A

B

C

.d-flex .justify-content-around

Space Evenly

A

B

C

.d-flex .justify-content-evenly

Individual Item Alignment

Using align-self

Start

Center

End

.align-self-start, .align-self-center, .align-self-end

Auto Margins for Alignment

Left

Pushed Right

.ms-auto pushes item to the right

Top

Pushed to Bottom

.mt-auto pushes item to the bottom in flex-column

Practical Centering Patterns

Centered Dialog Pattern

Confirm Action

Are you sure you want to proceed?

Centered Login Form

Sign In

Sticky Footer Pattern

Header

Main content area (flex-grow-1)

.d-flex .flex-column with .flex-grow-1 on main content

Navigation with Centered Logo

Logo uses .position-absolute .start-50 .translate-middle-x

Icon and Text Alignment

Icon aligned with text using align-items-center

99+ Badge aligned with text