craigmcn

Albert CSS

Colours

Default

#222
rgb(34, 34, 34)
hsl(0, 0%, 13%)

#fff
rgb(255, 255, 255)
hsl(0, 0%, 100%)

Primary

#005b99
rgb(0, 91, 153)
hsl(204, 100%, 30%)

#4cb5fa
rgb(76, 181, 250)
hsl(204, 95%, 64%)

Secondary

#993d00
rgb(153, 61, 0)
hsl(24, 100%, 30%)

#fa924c
rgb(250, 146, 76)
hsl(24, 95%, 64%)

Information

#03607d
rgb(3, 96, 125)
hsl(194, 95%, 25%)

#0bbaef
gb(11, 186, 239)
hsl(194, 91%, 49%)

Success

#036803
rgb(3, 104, 3)
hsl(120, 94%, 21%)

#09c809
rgb(9, 200, 9)
hsl(120, 91%, 41%)

Warning

#695802
rgb(105, 88, 2)
hsl(50, 96%, 21%)

#f9d615
rgb(249, 214, 21)
hsl(51, 95%, 53%)

Danger

#b60202
rgb(182, 2, 2)
hsl(0, 98%, 36%)

#f49090
rgb(244, 144, 144)
hsl(0, 82%, 76%)

Dark mode

A dark mode is available by adding data-mode="dark" to the <html> tag or class="theme--dark" to the <body> tag.

HTML 
<button class="button" type="button" data-mode="dark" data-toggle-dark-mode>
  Toggle dark mode
</button>

Typography

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading
HTML 
<h1>Heading 1 <span class="subheading">Sub-heading</span></h1>
<h2>Heading 2 <span class="subheading">Sub-heading</span></h2>
<h3>Heading 3</h3>

Paragraphs

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie. Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

You can add a <span class="lede"/> for emphasis of the first part of a paragraph.

HTML 
<p>
  <span class="lede">Lead sentence of the paragraph,</span>
  followed by normal body text.
</p>

Maecenas commodo malesuada eros vitae pellentesque. In suscipit finibus molestie. Sed in ultricies dolor. Vivamus quis varius nisl, at fringilla felis. Sed faucibus ullamcorper arcu in commodo. Cras euismod lacus id volutpat porta. Etiam vel posuere enim, eu accumsan sem. Mauris ante purus, mattis quis ante vel, iaculis mattis nulla. Donec finibus sem nec dictum vestibulum. Sed vitae augue quis ligula efficitur fermentum non eu nulla. Proin tincidunt ullamcorper blandit.

Pellentesque efficitur et orci nec lacinia. Integer congue justo in libero eleifend ullamcorper. Nullam rutrum, lorem eget efficitur placerat, turpis libero faucibus est, at aliquam arcu justo sit amet nibh. Sed mollis enim tristique tortor pulvinar bibendum. Nullam vel maximus dolor, at ornare velit. Nunc efficitur elit at felis pulvinar, vel fermentum justo gravida. Proin volutpat quam neque, in porta elit cursus at. Nam id velit semper, finibus sem id, fermentum sapien. Aliquam lobortis nisl a libero fringilla sollicitudin.

Links

Heading 2 link

Heading 3 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie.

Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

Remove :hover, :active and :visited styles by adding the permanent class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML 
<a href="#" class="permanent">Link without hover/active/visited styles</a>

Text variants

Primary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Information lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tables

Base

HTML 
<table class="table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Smith</td>
      <td>Developer</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">1 member</td></tr>
  </tfoot>
</table>

<!-- Modifiers (combinable): table--striped  table--bordered  table--hover  table--sm -->
<table class="table table--striped">...</table>
Table caption
Name Department Role Status
Alice Smith Engineering Developer Active
Bob Jones Design Designer Active
Carol White Marketing Manager On leave
David Brown Finance Analyst Active
4 team members

Striped

Name Department Role Status
Alice Smith Engineering Developer Active
Bob Jones Design Designer Active
Carol White Marketing Manager On leave
David Brown Finance Analyst Active

Bordered

Name Department Role Status
Alice Smith Engineering Developer Active
Bob Jones Design Designer Active
Carol White Marketing Manager On leave

Hover

Name Department Role Status
Alice Smith Engineering Developer Active
Bob Jones Design Designer Active
Carol White Marketing Manager On leave

Small

Name Department Role Status
Alice Smith Engineering Developer Active
Bob Jones Design Designer Active
Carol White Marketing Manager On leave

Responsive

Wrap in .table-responsive to enable horizontal scroll on narrow viewports.

HTML 
<div class="table-responsive">
  <table class="table table--bordered">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>
Name Email Department Role Location Start date Status
Alice Smith alice@example.com Engineering Developer Toronto 2021-03-15 Active
Bob Jones bob@example.com Design Designer Vancouver 2019-11-01 Active
Carol White carol@example.com Marketing Manager Montreal 2018-06-20 On leave

Forms

Some help text for this input.

Checkbox group
Radio group
HTML 
<form class="form">
  <!-- Sizes: form__label--lg/sm + form__control--lg/sm -->
  <div class="form__group">
    <label class="form__label" for="name">Label</label>
    <input id="name" class="form__control" type="text" required />
    <p class="text-muted text-sm">Optional help text.</p>
  </div>

  <div class="form__group">
    <label class="form__label" for="role">Select label</label>
    <select id="role" class="form__control" required>
      <option value="">Select</option>
      <option value="1">Option 1</option>
    </select>
  </div>

  <fieldset class="form__group">
    <legend class="form__label">Checkbox group</legend>
    <div id="check-error"></div>
    <div class="form__check">
      <label>
        <input type="checkbox" name="opts[]" required data-bouncer-target="#check-error" />
        Option A
      </label>
    </div>
  </fieldset>

  <fieldset class="form__group">
    <legend class="form__label">Radio group</legend>
    <div id="radio-error"></div>
    <div class="form__check">
      <label>
        <input type="radio" name="choice" required data-bouncer-target="#radio-error" />
        Choice A
      </label>
    </div>
  </fieldset>

  <div class="form__group">
    <button class="button" type="submit">Submit</button>
  </div>
</form>

Inline

.form--inline class can be used to display form controls inline. On smaller screens, the controls will wrap to the next line.

HTML 
<form class="form form--inline">
  <div class="form__group">
    <label class="form__label">Search</label>
    <input class="form__control" type="text" />
  </div>
  <div class="form__group">
    <button class="button button--primary" type="submit">Search</button>
  </div>
</form>

Buttons

Button classes can be applied to <a>, <button> or <input type="button|submit|reset"> tags.

Link

HTML 
<button class="button" type="button">Default</button>
<button class="button button--primary" type="button">Primary</button>
<button class="button button--secondary" type="button">Secondary</button>
<button class="button button--info" type="button">Info</button>
<button class="button button--success" type="button">Success</button>
<button class="button button--warning" type="button">Warning</button>
<button class="button button--danger" type="button">Danger</button>
<a href="#" class="button button--link">Link</a>

Buttons also come in a -dark variant.

HTML 
<button class="button button--dark" type="button">Default</button>
<button class="button button--primary-dark" type="button">Primary</button>
<button class="button button--secondary-dark" type="button">Secondary</button>
<button class="button button--info-dark" type="button">Info</button>
<button class="button button--success-dark" type="button">Success</button>
<button class="button button--warning-dark" type="button">Warning</button>
<button class="button button--danger-dark" type="button">Danger</button>

Buttons also come in three sizes: default, button--sm and button--lg.

HTML 
<button class="button button--primary button--lg" type="button">Large</button>
<button class="button button--primary" type="button">Default</button>
<button class="button button--primary button--sm" type="button">Small</button>

Button groups

Wrap .button elements in a .button-group to connect them into a single control. Buttons share borders and the group has a continuous border-radius on its outer edges.

Mixed variants work too:

HTML 
<div class="button-group" role="group" aria-label="Actions">
  <button class="button" type="button">Left</button>
  <button class="button" type="button">Middle</button>
  <button class="button" type="button">Right</button>
</div>

Radio button group

Place a .button-group__input input immediately before its label. The input is visually hidden; the checked state fills the label with the variant colour.

Checkbox button group

Same pattern with type="checkbox" for multi-select:

HTML — radio button group 
<div class="button-group" role="group" aria-label="Alignment">
  <input class="button-group__input" type="radio" id="align-l" name="align" checked />
  <label class="button button--primary" for="align-l">Left</label>
  <input class="button-group__input" type="radio" id="align-c" name="align" />
  <label class="button button--primary" for="align-c">Centre</label>
  <input class="button-group__input" type="radio" id="align-r" name="align" />
  <label class="button button--primary" for="align-r">Right</label>
</div>
HTML — checkbox button group 
<div class="button-group" role="group" aria-label="Style">
  <input class="button-group__input" type="checkbox" id="bold" name="bold" />
  <label class="button button--secondary" for="bold">Bold</label>
  <input class="button-group__input" type="checkbox" id="italic" name="italic" checked />
  <label class="button button--secondary" for="italic">Italic</label>
  <input class="button-group__input" type="checkbox" id="underline" name="underline" />
  <label class="button button--secondary" for="underline">Underline</label>
</div>

Alerts

Alerts come in a few flavours: default, information (info), success, warning and error. Links within the message will inherit the alert text colour, losing the hover, active and visited states.

Alerts with an alert__close button:

<button type="button" class="alert__close" aria-label="Close"><span class="fa-light fa-xl fa-xmark"></i></button>

will be hidden (display: none;) when closed. Alerts with the alert--removable class will be removed from the DOM when closed.

The alert--overlay class will overlay the alert at the top of its position: relative container.

The alert--sm class is intended to be used inside a component, and generally not at a page level.

HTML — basic variants 
<div class="alert" role="alert">
  <div class="alert__icon">
    <i class="fa-duotone fa-sharp fa-light fa-2xl fa-circle-question"></i>
  </div>
  <div class="alert__text">Default message</div>
</div>

<!-- Variants: alert--info  alert--success  alert--warning  alert--danger -->
<div class="alert alert--info" role="alert">
  <div class="alert__icon">
    <i class="fa-duotone fa-sharp fa-light fa-2xl fa-circle-info"></i>
  </div>
  <div class="alert__text">Informational message</div>
</div>
HTML — dismissible alert 
<!-- alert--removable removes from DOM on close; without it the alert is hidden only -->
<div class="alert alert--success alert--removable" role="alert">
  <div class="alert__icon">
    <i class="fa-duotone fa-sharp fa-light fa-2xl fa-circle-check"></i>
  </div>
  <div class="alert__text">Success message</div>
  <button type="button" class="alert__close" aria-label="Close">
    <i class="fa-duotone fa-sharp fa-light fa-xl fa-xmark"></i>
  </button>
</div>

<!-- alert--sm: compact variant for use inside components -->
<div class="alert alert--sm alert--info" role="alert">
  <div class="alert__icon">
    <i class="fa-duotone fa-sharp fa-light fa-circle-info"></i>
  </div>
  <div class="alert__text">Compact message</div>
</div>

Lists

Lists are default-styled, with a little extra margin and line-spacing. The bullets are outside, allowing the text to align with other body text.

Classes can be applied at the ol and ul level to specify the type of number or bullet to be applied: list list--alpha (a, b, c), list list--roman (i, ii, iii), list list--circle, list list--disc, list list--square, list list--none.

Ordered lists

List 1

  1. List item
    multi-line
  2. List item
    1. Nested ordered item
    2. Nested ordered item
    3. Nested ordered item
  3. List item

List 2

  1. List item
  2. List item
    • Nested unordered item
    • Nested unordered item
    • Nested unordered item
  3. List item

Unordered lists

List 1

  • List item
    multi-line
  • List item
    • Nested item
    • Nested item
    • Nested item
  • List item

List 2

  • List item
  • List item
    1. Nested ordered item
    2. Nested ordered item
    3. Nested ordered item
  • List item

Plain lists

List

  • List item
  • List item
    • Nested item
    • Nested item
    • Nested item
  • List item
HTML 
<ol>
  <li>Item</li>
  <li>Item
    <ol class="list list--roman">
      <li>Nested item</li>
    </ol>
  </li>
</ol>

<!-- Other markers: list--alpha  list--roman  list--circle  list--disc  list--square  list--none -->
<ul class="list list--none">
  <li>Item</li>
  <li>Item</li>
</ul>

Cards

Already used as an example for Colours, cards have a title and body.

Default

The default card style.

Primary

The primary colour card.

Secondary

The secondary colour card.

Information

The information colour card.

Success

The success colour card.

Warning

The warning colour card.

Danger

The danger colour card.

Dark variants

As with buttons, cards also come in a -dark variant.

Primary dark

The dark variant of the primary colour card.

Secondary

The dark variant of the secondary colour card.

Information

The dark variant of the information colour card.

Success

The dark variant of the success colour card.

Warning

The dark variant of the warning colour card.

Danger

The dark variant of the danger colour card.

HTML 
<div class="card">
  <div class="card__title">
    <h2>Card title</h2>
  </div>
  <div class="card__body">
    <p>Card body content.</p>
  </div>
</div>

<!-- Colour variants: card--primary  card--secondary  card--info  card--success  card--warning  card--danger -->
<!-- Dark variants:   card--primary-dark  card--secondary-dark  etc. -->
<div class="card card--primary">
  <div class="card__title"><h2>Primary card</h2></div>
  <div class="card__body"><p>Body content.</p></div>
</div>

Images

Only a few classes exist to display images, and they’re only to apply a little style around images:

  • img img--default: padded with rounded border
  • img--round: with img, circular
  • img--rounded: with img, rounded corners
  • img--padded: with img, padded, white background
  • img--border: with img, grey border
img img--default
img img--round. A circle requires a square image.
img img--rounded
img img--padded
img img--round img--padded
img img--border img--padded
img img--border img--rounded
img

Images from placebeard.it.

HTML 
<img class="img img--default" src="image.jpg" alt="Description" />
<img class="img img--round" src="square.jpg" alt="Description" />
<img class="img img--rounded" src="image.jpg" alt="Description" />
<img class="img img--padded" src="image.jpg" alt="Description" />
<img class="img img--border img--rounded" src="image.jpg" alt="Description" />

<figure>
  <img class="img img--rounded" src="image.jpg" alt="Description" />
  <figcaption>Caption text</figcaption>
</figure>

Badges

Variants

Default Primary Secondary Success Danger Warning Info Light Dark

Pill

Add .badge--pill for a rounded pill shape.

Default Primary Secondary Success Danger Warning Info Light Dark

In context

Badges scale to their parent element's font size and can be placed inline with text.

In headings New

Subheading Beta

Unread messages 4

Notifications 12 Alerts 3

HTML — variants & pill 
<span class="badge">Default</span>
<span class="badge badge--primary">Primary</span>
<span class="badge badge--secondary">Secondary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--danger">Danger</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--info">Info</span>
<span class="badge badge--light">Light</span>
<span class="badge badge--dark">Dark</span>

<!-- Pill shape -->
<span class="badge badge--pill badge--danger">3</span>
HTML — in context 
<h3>Heading <span class="badge badge--primary">New</span></h3>

<p>Unread <span class="badge badge--pill badge--danger">4</span></p>

<a href="#" class="button button--primary">
  Notifications <span class="badge badge--light ms-1">12</span>
</a>

Modals

Modals use the native <dialog> element with showModal(). Use data-modal-target on a trigger and a matching id on the dialog. A <form method="dialog"> inside the modal closes it natively via any submit button — no extra JavaScript needed.

Modal title

This is a basic modal dialog. It blocks interaction with the rest of the page until dismissed.

Click outside the modal or press Escape to close.

Confirm

Are you sure you want to delete this item? This action cannot be undone.

Terms and conditions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Edit profile

Centered modal

This modal uses .modal--centered to restore the browser's default vertical centering.

HTML — basic modal 
<button class="button button--primary" type="button" data-modal-target="my-modal">
  Open modal
</button>

<dialog id="my-modal" class="modal">
  <form method="dialog">
    <div class="modal__header">
      <h2 class="modal__title">Modal title</h2>
      <button class="modal__close" aria-label="Close">&times;</button>
    </div>
    <div class="modal__body">
      <p>Modal body content.</p>
    </div>
    <div class="modal__footer">
      <button type="submit" class="button">Close</button>
      <button type="submit" class="button button--primary">Save changes</button>
    </div>
  </form>
</dialog>

<!-- Size modifiers on <dialog>: modal--sm  modal--lg  modal--centered -->

Accordion / Disclosure

Built on the native <details> and <summary> elements — no JavaScript required for basic expand/collapse behaviour.

Standalone disclosure

What is Albert CSS?

Albert CSS is a personal CSS framework based on Bootstrap v4, built with vanilla JS and no framework dependencies.

How do I use it?

Include the compiled CSS and JS files in your HTML. Use the provided class names to style your components.

This one starts open

Add the open attribute to a <details> element to have it expanded on load.

Accordion

Wrap multiple items in .accordion to connect them visually. Each .accordion__item closes its siblings when opened.

Getting started

Download or link to the CSS and JS files. No build tools required for basic usage.

Customisation

Override CSS custom properties in your own stylesheet to change colours, spacing, and typography without touching the source.

Browser support

All modern browsers. The <details> element is supported in every evergreen browser and has been since 2020.

Accessibility

<details> and <summary> are natively keyboard accessible and exposed correctly to assistive technology — no ARIA attributes required.

Add custom details marker icons by including an element with the disclosure__icon or accordion__icon class inside the summary element.

HTML — standalone disclosure 
<details class="disclosure">
  <summary class="disclosure__trigger">Trigger title</summary>
  <div class="disclosure__body">
    <p>Content shown when expanded.</p>
  </div>
</details>

<!-- Add open attribute to expand on load -->
<details class="disclosure" open>...</details>
HTML — accordion group 
<div class="accordion">
  <details class="accordion__item">
    <summary class="accordion__trigger">
      Item 1
      <i class="accordion__icon fa-duotone fa-sharp fa-light fa-chevron-down" aria-hidden="true"></i>
    </summary>
    <div class="accordion__body">
      <p>Content for item 1.</p>
    </div>
  </details>
  <details class="accordion__item">
    <summary class="accordion__trigger">
      Item 2
      <i class="accordion__icon fa-duotone fa-sharp fa-light fa-chevron-down" aria-hidden="true"></i>
    </summary>
    <div class="accordion__body">
      <p>Content for item 2.</p>
    </div>
  </details>
</div>

Tabs

Use role="tablist", role="tab", and role="tabpanel" with matching aria-controls / id pairs. The active tab is indicated by aria-selected="true"; inactive panels use the hidden attribute. Arrow keys, Home, and End navigate between tabs.

Tabs organize content into separate views where only one is visible at a time. Use them when content can be meaningfully grouped into distinct, parallel sections.

HTML 
<div class="tabs">
  <div class="tabs__list" role="tablist" aria-label="Section tabs">
    <button class="tabs__tab" role="tab"
      id="tab-1" aria-controls="panel-1"
      aria-selected="true" tabindex="0">Tab 1</button>
    <button class="tabs__tab" role="tab"
      id="tab-2" aria-controls="panel-2"
      aria-selected="false" tabindex="-1">Tab 2</button>
  </div>
  <div class="tabs__panel" role="tabpanel"
    id="panel-1" aria-labelledby="tab-1">
    <p>Content for tab 1.</p>
  </div>
  <div class="tabs__panel" role="tabpanel"
    id="panel-2" aria-labelledby="tab-2" hidden>
    <p>Content for tab 2.</p>
  </div>
</div>

Tooltips and Popovers

Tooltips

Add the .tooltip class and a data-tooltip attribute directly to any interactive element. No JavaScript required. The tooltip appears on hover and keyboard focus.

Placement defaults to top. Use .tooltip--bottom, .tooltip--left, or .tooltip--right to change direction.

Placements

On inline text

Wrap an inline element to add a tooltip to a word or phrase. HTML is a good candidate.

Popovers

A .popover wrapper contains a .popover__trigger button and a .popover__panel. Clicking the trigger toggles the panel; Escape closes it and returns focus to the trigger.

Placement is set via a modifier on the panel: .popover__panel--top, .popover__panel--left, or .popover__panel--right. Default placement is bottom.

Placements

HTML — tooltip 
<!-- Default placement: top. Others: tooltip--bottom  tooltip--left  tooltip--right -->
<button class="button tooltip" data-tooltip="Tooltip text">Hover me</button>

<button class="button tooltip tooltip--bottom" data-tooltip="Bottom">Bottom</button>
HTML — popover 
<div class="popover">
  <button class="button popover__trigger"
    aria-expanded="false"
    aria-controls="my-popover"
    aria-haspopup="dialog">
    Open popover
  </button>
  <div class="popover__panel" id="my-popover" hidden>
    <strong class="popover__title">Popover title</strong>
    <p class="popover__body">Popover body content.</p>
  </div>
</div>

<!-- Panel placement modifiers: popover__panel--top  popover__panel--left  popover__panel--right -->
<!-- Default placement: bottom -->

Utilities

Some utility classes are available to handle specific needs, not handled by other components.

Spacing

Pattern: .{m|p}{axis}{n} — margin or padding, axis, and a numeric scale where each step is 0.25rem (0–8, reaching 2rem). Uses CSS logical properties, so axes respect writing direction.

Axis Margin Padding Property
(none) m-{n} p-{n} all sides
t mt-{n} pt-{n} block-start (top in LTR)
b mb-{n} pb-{n} block-end (bottom in LTR)
s ms-{n} ps-{n} inline-start (left in LTR)
e me-{n} pe-{n} inline-end (right in LTR)
x mx-{n} px-{n} inline (left + right in LTR)
y my-{n} py-{n} block (top + bottom in LTR)

Scale: 0=0   1=0.25rem   2=0.5rem   3=0.75rem   4=1rem   5=1.25rem   6=1.5rem   7=1.75rem   8=2rem

Auto margin utilities: mx-auto, my-auto, ms-auto, me-auto, mt-auto, mb-auto.

For example:

  • 2rem top margin: mt-8
  • 1.5rem inline-end (right) padding: pe-6
  • 1rem horizontal margins: mx-4
  • 0.5rem vertical padding: py-2
  • 0.25rem inline-start (left) padding: ps-1
  • No padding: p-0

Legacy utilities

The original spacing classes remain available. Pattern: .{m|p}-{side}-{size}. Sides: t (top), b (bottom), l (left), r (right), h (left + right), v (top + bottom). Sizes: xs (0.25rem), sm (0.5rem), md (1rem), lg (1.5rem), xl (2rem).

  • 2rem top margin: m-t-xl
  • 1.5rem right padding: p-r-lg
  • 1rem horizontal margins: m-h-md
  • 0.5rem vertical padding: p-v-sm
  • No padding: p-0

Text

Text utilities can be used on both block-level and inline elements.

Text colour utilities match the alerts, buttons and cards colours:

Primary colour text using class="text-primary".

Secondary colour text using class="text-secondary".

Information colour text using class="text-info".

Success colour text using class="text-success".

Warning colour text using class="text-warning".

Danger colour text using class="text-danger".

Muted colour text using class="text-muted".

Background colour

Use text-bg-* to set both background and a theme-aware contrasting text colour in one class:

text-bg-primary
text-bg-secondary
text-bg-info
text-bg-success
text-bg-warning
text-bg-danger

Use bg-* alone when you only need the background:

bg-primary
bg-secondary
bg-info
bg-success
bg-warning
bg-danger
bg-muted
bg-dark
bg-white
bg-transparent

Text size

Font size utilities use a Tailwind-style scale with paired line-height values (all in rem):

Extra small text using class="text-xs" (0.75rem).

Small text using class="text-sm" (0.875rem).

Base text using class="text-base" (1rem).

Large text using class="text-lg" (1.125rem).

Extra large text using class="text-xl" (1.25rem).

2× large text using class="text-2xl" (1.5rem).

Text alignment

text-start, text-center, and text-end use CSS logical values and respect writing direction.

Left-aligned text (text-start).

Centred text (text-center).

Right-aligned text (text-end).

Other text utilities

“Normal” weight h4 heading with class="fw-normal". It can be used to reset font weight in headings or bold text.

Bold text using class="fw-bold". It’s not quite as bold as <strong> .
Strong text, for reference.

Light text using class="fw-light".

Uppercase text using class="text-uppercase". For example, use it with text-sm and fw-light for fun variations.

Display

Display values

Set the display property directly with a utility class.

Class Property
d-none display: none
d-block display: block
d-inline display: inline
d-inline-block display: inline-block
d-flex display: flex
d-inline-flex display: inline-flex
d-grid display: grid

Flex helpers

Use alongside d-flex or d-inline-flex to control direction, wrapping, alignment, and justification.

Class Property
flex-row flex-direction: row
flex-column flex-direction: column
flex-wrap flex-wrap: wrap
flex-nowrap flex-wrap: nowrap
align-items-start align-items: flex-start
align-items-end align-items: flex-end
align-items-center align-items: center
align-items-stretch align-items: stretch
align-items-baseline align-items: baseline
justify-content-start justify-content: flex-start
justify-content-end justify-content: flex-end
justify-content-center justify-content: center
justify-content-between justify-content: space-between
justify-content-around justify-content: space-around
justify-content-evenly justify-content: space-evenly

Gap

Set gap, column-gap, or row-gap on flex and grid containers. Same 0–8 scale as spacing (n × 0.25rem).

  • gap-{n} — both axes
  • gap-x-{n} — columns only
  • gap-y-{n} — rows only

Overflow

Class Property
overflow-auto overflow: auto
overflow-hidden overflow: hidden
overflow-visible overflow: visible
overflow-scroll overflow: scroll
overflow-clip overflow: clip
overflow-x-auto overflow-x: auto
overflow-x-hidden overflow-x: hidden
overflow-x-scroll overflow-x: scroll
overflow-y-auto overflow-y: auto
overflow-y-hidden overflow-y: hidden
overflow-y-scroll overflow-y: scroll

Position

Class Property
position-static position: static
position-relative position: relative
position-absolute position: absolute
position-fixed position: fixed
position-sticky position: sticky

Sticky helpers

sticky-top and sticky-bottom apply position: sticky with a fixed edge and a default z-index of 100.

Edge placement

Use with position-absolute or position-fixed to anchor an element to an edge of its container. Values: 0, 50%, 100%.

  • top-{0|50|100}
  • bottom-{0|50|100}
  • start-{0|50|100} — inset-inline-start
  • end-{0|50|100} — inset-inline-end

Add translate-middle alongside top-50 start-50 to centre an absolutely-positioned element within its parent.

top / start top / end centre bottom / start bottom / end

Shadows

Box-shadow utility scale — values use px as is standard for decorative effects.

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-inner
shadow-none

Borders

Adding borders

border adds a 1px border on all sides using var(--grey300). Individual sides use logical properties.

border
border-top
border-bottom
border-start
border-end

Border colours

primary
secondary
success
info
warning
danger

Border width

border-1
border-2
border-3
border-4

Border radius

rounded-0
rounded-sm
rounded
rounded-lg
rounded-xl
rounded-xxl
rounded-pill
rounded-full

Z-index

Numeric scale

General-purpose scale for stacking elements within a component. Use with position-relative or position-absolute.

Class Value
z-0 0
z-10 10
z-20 20
z-30 30
z-40 40
z-50 50
z-auto auto

Semantic scale

Named values that match the layering used by framework components.

Class Value Used by
z-above 10 Above normal flow
z-raised 100 Raised elements
z-dropdown 1000 Dropdown
z-sticky 1020 sticky-top, sticky-bottom
z-fixed 1030 Fixed headers/footers
z-backdrop 1040 Modal backdrop
z-modal 1050 Modal
z-popover 1060 Popover
z-tooltip 1070 Tooltip

Aspect ratio

Apply ratio to a wrapper element, then add a modifier for the desired ratio. The direct child (iframe, img, video, etc.) is stretched to fill the container via absolute positioning. 

<div class="ratio ratio--16x9">
  <iframe src="..." title="..."></iframe>
</div>
Class Ratio Common use
ratio--1x1 1:1 Square thumbnails, avatars
ratio--4x3 4:3 Standard SD video
ratio--3x2 3:2 Photography
ratio--16x9 16:9 HD video, embeds
ratio--21x9 21:9 Cinematic / wide banners
ratio--9x16 9:16 Vertical / portrait video

Examples

1×1

ratio--1x1

4×3

ratio--4x3

16×9

ratio--16x9

21×9

ratio--21x9

HTML 
<!-- Ratios: ratio--1x1  ratio--4x3  ratio--3x2  ratio--16x9  ratio--21x9  ratio--9x16 -->
<div class="ratio ratio--16x9">
  <iframe src="https://..." title="Video"></iframe>
</div>

Grid

grid sets a 12-column CSS grid. Use grid-cols-{n} for equal-width columns, or col-{n} to span a specific number of columns. Combine with gap-* for gutters.

Equal-width columns

grid grid-cols-{n} — each child fills one column:

col
col
col
col
col
col
col
col
col

Column spans

Use col-{n} on children of a grid container to span a specific number of the 12 columns:

col-12
col-6
col-6
col-8
col-4
col-4
col-4
col-4
col-3
col-3
col-3
col-3

Row and full-width helpers

  • col-full — spans all 12 columns (1 / -1)
  • col-auto — auto-sized column
  • row-span-{1–6} — span multiple rows
  • row-span-full — span all rows

Cell alignment

  • place-items-{center|start|end|stretch} — align all cells within the grid
  • place-self-{center|start|end|stretch} — align a single cell within its area
HTML — equal-width columns 
<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>
HTML — column spans 
<div class="grid gap-4">
  <div class="col-8">8 of 12 columns</div>
  <div class="col-4">4 of 12 columns</div>
  <div class="col-6">Half width</div>
  <div class="col-6">Half width</div>
</div>