ReactBootstrap Component Behavior Change with Bootstrap Version Transition

Core Compatibility Rule

ReactBootstrap enforces strict version pairing: v2.x requires Bootstrap 5.x, and v1.x requires Bootstrap 4.x. Major version mismatches cause styling inconsistencies because CSS class names, structure, and utility implementations differ fundamentally between Bootstrap releases.

Key Component Changes Between Bootstrap 4 and 5

• Button: Class names remain btn and btn-primary, but CSS specificity and variable names changed (e.g., --bs-blue became --blue)
• Modal: Sizing utilities shifted from modal-lg/modal-sm to modal-lg/modal-sm classes applied differently
• FormGroup: Layout mapping changed due to Bootstrap 5 flex utilities
• Table: Striping class table-striped now uses different CSS variable structure
• Dropdown: Popper.js integration and positioning logic updated

Verification Steps

1. Run npm ls react-bootstrap bootstrap to confirm version compatibility
2. Inspect rendered HTML class attributes in browser dev tools before and after upgrade
3. Test components in isolation using Storybook or a test environment to catch visual regressions
4. Review the ReactBootstrap migration guide for component-specific breaking changes

Action Required

If you're experiencing styling issues, first verify your current ReactBootstrap and Bootstrap versions. Then check whether you're using any custom CSS that references Bootstrap 4 variables or classes that changed in Bootstrap 5. The most common cause of unexpected behavior is a version mismatch or outdated variable references.

One missing detail needed: What are your current ReactBootstrap and Bootstrap package versions? Run npm ls react-bootstrap bootstrap and share the output to pinpoint exact compatibility issues.