framework foundation bootstrap materialize classes reference comparison

Framework class quick reference

Use this reference when you need to translate a layout pattern or component from one framework to another, or when working on a project and you can’t remember a specific class name.

Grid

Concept	Foundation 6	Bootstrap 4	Materialize
Outer wrapper	`grid-x`	`container`	`container`
Row / container	`grid-x`	`row`	`row`
Full width	`cell small-12`	`col-12`	`col s12`
Half width (medium)	`cell medium-6`	`col-md-6`	`col m6`
One-third (large)	`cell large-4`	`col-lg-4`	`col l4`
One-quarter (large)	`cell large-3`	`col-lg-3`	`col l3`
Column offset	`medium-offset-3`	`offset-md-3`	`offset-m3`
Remove gutters	`grid-x` (margin grid)	`no-gutters` on `row`	N/A (manual)
Auto-width cell	`cell auto`	`col`	N/A

Buttons

Style	Foundation 6	Bootstrap 4	Materialize
Default	`.button`	`.btn .btn-secondary`	`.btn`
Primary	`.button` (or add custom)	`.btn .btn-primary`	`.btn .blue`
Success / positive	`.button .success`	`.btn .btn-success`	`.btn .green`
Warning	`.button .warning`	`.btn .btn-warning`	`.btn .orange`
Danger / destructive	`.button .alert`	`.btn .btn-danger`	`.btn .red`
Outline style	`.button .hollow`	`.btn .btn-outline-primary`	`.btn-outlined`
Large	`.button .large`	`.btn .btn-lg`	`.btn-large`
Small	`.button .small`	`.btn .btn-sm`	`.btn-small`
Full width	`.button .expanded`	`.btn .btn-block`	`.btn` + `width:100%`
Disabled	`.button.disabled` or `disabled` attr	`.btn.disabled` or `disabled` attr	`.disabled`

Alerts and callouts

Style	Foundation 6	Bootstrap 4	Materialize
Info	`.callout`	`.alert .alert-info`	`.card .blue.lighten-4`
Success	`.callout .success`	`.alert .alert-success`	`.card .green.lighten-4`
Warning	`.callout .warning`	`.alert .alert-warning`	`.card .orange.lighten-4`
Danger / Error	`.callout .alert`	`.alert .alert-danger`	`.card .red.lighten-4`

Concept	Foundation 6	Bootstrap 4	Materialize
Nav wrapper	`.top-bar`	`.navbar`	`<nav>` with `.nav-wrapper`
Nav list	`.menu`	`.navbar-nav`	`<ul>` inside `.nav-wrapper`
Nav item	`.menu-item`	`.nav-item`	`<li>`
Nav link	`<a>` in `.menu-item`	`.nav-link`	`<a>` in `<li>`
Brand / logo	`.top-bar-left`	`.navbar-brand`	`.brand-logo`
Mobile toggle	Built-in with `.title-bar`	`.navbar-toggler`	Sidenav trigger button
Active item	N/A (add custom class)	`.active`	`.active`

Typography

Concept	Foundation 6	Bootstrap 4	Materialize
Display heading	No class needed — semantic `<h1>`–`<h6>`	`.display-1` through `.display-4`	Semantic headings only
Lead paragraph	`.lead`	`.lead`	`.flow-text`
Small text	`.text-small` or `<small>`	`<small>` or `.small`	`<small>`
Muted text	N/A (add custom)	`.text-muted`	`.grey-text`
Text left/center/right	`.text-left` / `.text-center` / `.text-right`	`.text-left` / `.text-center` / `.text-right`	`.left-align` / `.center-align` / `.right-align`

Visibility utilities

Concept	Foundation 6	Bootstrap 4	Materialize
Hide on mobile	`.hide-for-small-only`	`.d-none .d-md-block`	`.hide-on-small-only`
Show only on mobile	`.show-for-small-only`	`.d-block .d-md-none`	`.show-on-small`
Screen reader only	`.show-for-sr`	`.sr-only`	`.sr-only` (custom or Bootstrap)