Bootstrap

Difficulty:
Framework
Bootstrap Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Bootstrap is the world's most popular HTML, CSS, and JavaScript toolkit. Its visual language is shared muscle memory for a generation of developers: a 12-column responsive grid with container gutters, uniform primary blue (#0D6EFD) buttons and links with brand purple (#7952B3) accents, 0.375rem radii, universally recognized cards, modals, and navbars, and a 1rem system-font body. Made for rapid builds.

BootstrapFramework

Prompt Template

Base Template
Design a Bootstrap-inspired interface. - 12-column responsive grid with .container gutters; - Primary blue #0D6EFD buttons and links, brand purple #7952B3; - 0.375rem border radius, standard form controls and input groups; - Cards, modals, and navbar patterns everyone recognizes; - System font stack with 1rem body. Colors: #0D6EFD, #7952B3, #F8F9FA, #212529 with #0D6EFD accent. Typography: system-ui.

Variant Prompts

📱 Mobile
Design a mobile app with Bootstrap aesthetics. Use Bootstrap color identity with #0D6EFD accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bootstrap style. Use Bootstrap color identity with #0D6EFD accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Bootstrap design language. Use Bootstrap color identity with #0D6EFD accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Bootstrap visual identity. Use Bootstrap color identity with #0D6EFD accents. Compelling, conversion-focused.

Usage Examples

Bootstrap Admin Dashboard

Dashboard
Build an admin dashboard with Bootstrap style: responsive grid, cards, tables, and #0D6EFD primary buttons.

Bootstrap Landing Page

Landing
Create a landing page with Bootstrap design language: navbar, hero, feature columns, and a standard footer.

✅ Best For

  • Rapid development
  • Classic web apps
  • Responsive grids

❌ Avoid For

  • Products with distinctive brand visuals
  • Design experiments rejecting grid systems

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download