Bootstrap 5.3 • 10 Layouts • Dark Mode Included

TeamDream
Beautiful Team Card
Bootstrap Template

10 professionally designed team card layouts. Pixel-perfect, fully responsive, zero build dependencies. Ready to drop into any project.

10 Demos Dark Mode W3C Valid Fully Responsive JS Filtering
10
Unique Layouts
2
Theme Modes
7k+
Icons Included
0
Build Tools

Bootstrap 5.3

Latest stable framework, fully utilized

Material Design Icons

7,000+ icons bundled locally

Dark & Light Modes

CSS variable theming system

Interactive Filtering

Department filter with vanilla JS

10 Beautiful Layouts

Every layout is unique — choose the style that fits your project perfectly.

Classic Grid Light

Layout 01

Classic Grid Light

Clean 4-column card grid on a warm neutral background. Ghost social icons, smooth lift-on-hover effect.

Preview
Editorial Dark Grid

Layout 02

Editorial Dark Grid

3-column landscape cards on a deep navy background. Left-aligned typography with a signature indigo accent rule on each card.

Preview
Horizontal Cards

Layout 03

Horizontal Cards

Each member as a full-width row with photo on the left and bio text on the right. Accent border slides in on hover.

Preview
Full Overlay Hover

Layout 04

Full Overlay Hover

Portrait cards where hovering reveals name, role, bio, and social links via a dark overlay that slides up.

Preview
Minimal Circle

Layout 05

Minimal Circle

Ultra-minimal ghost layout — circular photos, clean typography, and a floating card that materialises on hover.

Preview
Glassmorphism

Layout 06

Glassmorphism

Frosted glass cards floating over a vivid purple gradient. Blur + saturation backdrop filter with a graceful fallback.

Preview
List View

Layout 07

List View

Team directory in a filterable table format. Avatar, name, department badge, socials, and profile link — all in one row.

Preview
Skills and Tags Dark

Layout 08

Skills & Tags Dark

Dark mode cards with square-cropped photos. Skill pill badges and experience indicators displayed below each member's social links.

Preview
Featured plus Grid

Layout 09

Featured + Grid

Asymmetric layout with a large featured leader card on the left and a compact 3-column mini-grid of the team on the right.

Preview
Filter by Department

Layout 10

Filter by Department

Square-crop cards with coloured department badges pinned over each photo. Filter tabs instantly show only the department you need.

Preview

What's Included

Everything you need to add a professional team section to any project.

10 unique HTML demo files
Dark mode with CSS custom properties
Material Design Icons 7.4 (local fonts)
IntersectionObserver card animations
Glassmorphism with @supports fallback
JS department filter (no jQuery)
Google Fonts: Inter + Lora
W3C valid, semantic HTML5 markup

Built with

Bootstrap 5.3 MDI v7.4 Google Fonts HTML5 CSS3 Vanilla JS