Skip to content

Drop deprecated .table-primary and .table-dark remaining usage #42537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julien-deramond merged 1 commit into from
Jun 20, 2026
+8 −8
Merged

Drop deprecated .table-primary and .table-dark remaining usage #42537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/src/assets/examples/cheatsheet/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const body_class = 'bg-body-tertiary'
</table>`} />

<Example showMarkup={false} code={`
<table class="table table-dark table-borderless">
<table class="table table-borderless" data-bs-theme="dark">
<thead>
<tr>
<th scope="col">#</th>
Expand Down
12 changes: 6 additions & 6 deletions site/src/content/docs/content/tables.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

<Table class="table table-hover" />

<Table class="table table-dark table-hover" />
<Table class="table table-hover" theme="dark" />

These hoverable rows can also be combined with the striped rows variant:

Expand Down Expand Up @@ -153,7 +153,7 @@ Highlight a table row or cell by adding a `.table-active` class.
`} />

<Example code={`
<table class="table table-dark">
<table class="table" data-bs-theme="dark">
<thead>
<tr>
<th scope="col">#</th>
Expand Down Expand Up @@ -184,7 +184,7 @@ Highlight a table row or cell by adding a `.table-active` class.
</tbody>
</table>
`} customMarkup={`
<table class="table table-dark">
<table class="table" data-bs-theme="dark">
<thead>
...
</thead>
Expand Down Expand Up @@ -215,7 +215,7 @@ For the accented tables ([striped rows](#striped-rows), [striped columns](#strip

- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.

- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
- For each table variant, we set `--bs-table-bg-type` or `--bs-table-bg-state` to a semi-transparent color derived from the current theme color. Those values are layered in the inset box shadow, while `--bs-table-accent-bg` remains a transparent fallback.

- Text and border colors are generated the same way, and their colors are inherited by default.

Expand All @@ -241,15 +241,15 @@ Add `.table-borderless` for a table without borders.

<Table class="table table-borderless" />

<Table class="table table-dark table-borderless" />
<Table class="table table-borderless" theme="dark" />

## Small tables

Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.

<Table class="table table-sm" />

<Table class="table table-dark table-sm" />
<Table class="table table-sm" theme="dark" />

## Table group dividers

Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/guides/migration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
- Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
- Increased the `2xl` breakpoint from 1400px to 1536px, and its container from 1320px to 1440px.
- **Adopted modern CSS color functions.** All Sass color variables now use `oklch()` notation (e.g., `$blue: oklch(60% 0.24 240)`) and tint/shade scales are generated with `color-mix(in lab, ...)` in the compiled CSS. The v5 `$*-rgb` CSS custom properties and `rgba()` patterns have been removed. This requires browser support for `color-mix()` and `oklch()`.
- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, cards, accordions, and more.
- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`, `.table-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, tables, cards, accordions, and more.
- **Responsive and state classes now use a prefix instead of an infix or suffix.** Class names follow the Tailwind-style `prefix:class` pattern (e.g., `md:d-none` instead of `d-md-none`, `hover:opacity-50` instead of `opacity-50-hover`). In HTML, use the unescaped colon: `class="md:d-none"`. This applies to utilities, grid, pseudo-state variants, and all responsive components.

<BsTable>
Expand Down