Styles and layouts

Style controls how form elements look. Layout controls how the page is arranged.

Styles

Style	Use it when
Base	You want a blank foundation and plan to write your own CSS.
v2	You want Keycloak's default look, customized.
Custom	You want the editor's built-in theme as a starting point.
Bootstrap	Your product is built on Bootstrap or a Bootswatch theme.
Carbon	Your product is built on Carbon (IBM's design system).

Bootstrap and Carbon restyle Keycloak's existing markup: they don't rebuild the pages as a React app. Framework styles cover the common screens well; check any less-common auth screen your product actually uses, since coverage there varies.

Layouts

• Card: a compact, centered form. Good for a focused sign-in screen.
• Horizontal: a wider layout for a more branded composition.
• Split: a two-pane desktop layout that collapses to one column on narrow screens.

Whenever you change layout, recheck background placement, logo size, long headings, and that every control is still reachable on a small screen.

Going beyond Quick start

Quick start covers the common knobs. For anything that needs a CSS selector, switch to Styling. For example, to stop a long heading from wrapping badly:

#kc-page-title {
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
}

Keep framework-specific overrides in the matching file (bootstrap-custom.css for Bootstrap, carbon-custom.css for Carbon), both are included in the export. Re-check custom CSS after switching style or Bootswatch variant, since selectors and design tokens can change between them.

Carbon's export bundles IBM Plex Sans (and its license), so it doesn't depend on a font CDN. Check both the White and Gray 100 surfaces against light and dark preview.

Keep a recoverable baseline

Export before trying a different style: it's cheap insurance. Once you land on a design, re-import that export once to confirm its style, layout, CSS, and assets all round-trip correctly. That export is also what the next person picks up to continue your work.