Bootstrap Legacy Patterns

When to use this skill

• •Maintaining sites built with Bootstrap.
• •Migrating from Bootstrap to Tailwind.
• •Using Bootstrap components.

1. Grid System

• •Classes: container, row, col-{breakpoint}-{size}.
• •Nesting: Rows must be direct children of containers or columns.

2. Utilities vs Components

• •Components: Bootstrap relies heavily on pre-built components (.card, .navbar, .modal).
• •Utilities: Bootstrap 5 introduced more utility classes (.d-flex, .mb-3), similar to Tailwind. Prefer these over custom CSS when editing.

3. Migration

• •To Tailwind: Map concepts (e.g., d-none -> hidden, text-center -> text-center, btn-primary -> custom component).
• •Coexistence: Avoid loading both if possible, but if needed, scope Bootstrap to a wrapper (namespace).