SCSS/CSS → React-Bootstrap classes

Paste styles on the left. You’ll get best-effort Bootstrap utility classes + leftover CSS.

Input (SCSS/CSS)

Tip: plain CSS blocks convert best. SCSS nesting/mixins need a real SCSS compiler step.

Output (suggestions)

Selector: .container
Bootstrap classes: d-flex justify-content-between align-items-center mt-3 gap-2
Example usage: <div className="d-flex justify-content-between align-items-center mt-3 gap-2">...</div>

Selector: .title
Bootstrap classes: text-center fw-bold w-100
Example usage: <div className="text-center fw-bold w-100">...</div>

Nice — no leftover declarations for the rules we detected.

React-Bootstrap components still take className. This tool focuses on utility classes you can pass to those components.

Current mapper covers: display/flex, justify/align, gap, margin/padding (per-side), text-align, font-weight, width/height.