ITATS Design System

Spacing

Use m-{n} for margin and p-{n} for padding. Add directional suffix: t top, b bottom, s start, e end, x horizontal, y vertical. Scale: 0–5, auto.

p-1

p-2

p-3

p-4

p-5

mt-0

mt-2

mt-4

mx-3

my-2

ms-auto

Show Code

<!-- Padding -->
<div class="p-3">Padding all sides</div>
<div class="px-4">Padding horizontal</div>
<div class="py-2">Padding vertical</div>
<div class="pt-1 pb-3">Top & bottom</div>

<!-- Margin -->
<div class="m-3">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="mt-4 mb-2">Top & bottom margin</div>
<div class="ms-auto">Push to right</div>

Display

Quickly and responsively toggle the display value with d-{value}. Add breakpoint: d-{bp}-{value}.

d-inline

d-inline-block

d-block

d-flex

d-inline-flex

Responsive: d-none d-md-block hides element on mobile, shows on md+

Show Code

<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex</div>
<div class="d-inline-flex">Inline-flex</div>
<div class="d-grid">Grid</div>

<!-- Responsive visibility -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-block d-lg-none">Visible on mobile, hidden on lg+</div>

Flexbox

A complete set of flex utilities for direction, wrapping, alignment, and ordering.

flex-row / flex-column

1

2

3

justify-content-between

Start

Center

End

align-items-center

Short

Taller

Medium

gap-{n}

gap-4

Show Code

<!-- Direction -->
<div class="d-flex flex-row">...</div>
<div class="d-flex flex-column">...</div>

<!-- Justify Content -->
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

<!-- Align Items -->
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>

<!-- Wrap -->
<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-nowrap">...</div>

<!-- Gap -->
<div class="d-flex gap-2">...</div>
<div class="d-flex gap-4">...</div>

Colors & Backgrounds

Apply text and background colors using utility classes.

Text colors

text-primary text-secondary text-success text-danger text-warning text-info text-muted text-white

Background colors

bg-primary bg-secondary bg-success bg-danger bg-warning bg-info bg-light bg-dark

Show Code

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>

Text Utilities

Utilities for text alignment, wrapping, weight, style, and more.

text-start (left-aligned)

text-center (centered)

text-end (right-aligned)

fw-bold — Bold text

fw-semibold — Semi-bold text

fw-normal — Normal text

fw-light — Light text

fst-italic — Italic text

text-decoration-underline

text-uppercase

TEXT-LOWERCASE

text capitalize words

text-truncate — very long text that will be truncated

Show Code

<!-- Alignment -->
<p class="text-start">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>

<!-- Weight -->
<p class="fw-bold">Bold</p>
<p class="fw-semibold">Semibold</p>
<p class="fw-normal">Normal</p>
<p class="fw-light">Light</p>

<!-- Transform -->
<p class="text-uppercase">Uppercase</p>
<p class="text-lowercase">Lowercase</p>
<p class="text-capitalize">Capitalize</p>

<!-- Truncate -->
<p class="text-truncate" style="max-width: 200px;">Long text...</p>

Borders & Rounded

Add or remove borders and control border radius with utility classes.

Borders

border

border-top

border-bottom

border-start

border-end

border-primary

border-danger

Border Radius

rounded-0

rounded-1

rounded

rounded-3

rounded-pill

circle

Show Code

<!-- Borders -->
<div class="border">All borders</div>
<div class="border-top">Top only</div>
<div class="border-0">No border</div>
<div class="border border-primary">Primary border</div>

<!-- Border radius -->
<div class="rounded">Default radius</div>
<div class="rounded-0">No radius</div>
<div class="rounded-pill">Pill shape</div>
<div class="rounded-circle">Circle</div>

Shadows & Opacity

Apply shadows and opacity levels with utility classes.

Shadows

shadow-none

shadow-sm

shadow

shadow-lg

Opacity

opacity-100

opacity-75

opacity-50

opacity-25

Show Code

<!-- Shadows -->
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Opacity -->
<div class="opacity-100">100%</div>
<div class="opacity-75">75%</div>
<div class="opacity-50">50%</div>
<div class="opacity-25">25%</div>

Sizing

Set width and height using percentage-based or viewport-based utility classes.

Width utilities

w-25

w-50

w-75

w-100

w-auto

Show Code

<!-- Width -->
<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
<div class="w-auto">Auto</div>
<div class="mw-100">Max-width 100%</div>

<!-- Height -->
<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-100">100%</div>
<div class="mh-100">Max-height 100%</div>

<!-- Viewport units -->
<div class="min-vw-100">Min viewport width</div>
<div class="min-vh-100">Min viewport height</div>