A comprehensive CLI tool that automatically converts CSS properties to Bootstrap 5.3 utility classes and updates your Blade templates accordingly. Convert margin, padding, typography, positioning, flexbox, colors, and more!
npm install -g css2bs
Or use locally in your project:
npm install css2bs
npx css2bs <cssFile> <bladeDir>
css2bs path/to/styles.css path/to/resources/views
Before:
.hero-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 2rem auto;
padding: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
text-decoration: underline;
background-color: #f8f9fa;
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
z-index: 10;
}
@media (min-width: 768px) {
.hero-section {
font-size: 2rem;
padding: 3rem;
text-align: left;
}
}
<div class="hero-section">Welcome to our site</div>
After:
.hero-section {
position: relative; /* Preserved - layout critical */
z-index: 10; /* Preserved - no Bootstrap equivalent */
}
<div class="hero-section position-relative bg-light rounded-3 shadow-sm d-flex justify-content-center align-items-center mx-auto my-4 p-4 fs-3 fw-semibold text-center text-decoration-underline md-fs-1 md-p-5 md-text-start">Welcome to our site</div>
margin, margin-top/right/bottom/left, shorthand supportpadding, padding-top/right/bottom/left, shorthand supportwidth, height, max-width, min-height (percentages & viewport units)gap, row-gap, column-gap (flexbox & grid)font-size → fs-*/display-*, font-weight → fw-*, font-style → fst-*, font-family → font-monospacetext-align → text-start/center/end (responsive support)text-decoration → text-decoration-underline/line-through/nonetext-transform → text-uppercase/lowercase/capitalizeline-height → lh-1/sm/base/lgwhite-space → text-wrap/nowrap, word-wrap/word-break → text-breakposition → position-static/relative/absolute/fixed/stickytop/right/bottom/left → top-*/end-*/bottom-*/start-* (0, 50%, 100%)transform → translate-middle/translate-middle-x/translate-middle-ydisplay → d-block/inline/flex/grid/none etc.flex-direction/wrap/grow/shrink, justify-content, align-items/content/selfoverflow → overflow-auto/hidden/scroll/visiblecolor, background-color → Bootstrap color utilities (when exact matches)border, border-width/style/color, individual sides, border-radiusbox-shadow → shadow-sm/lg/none (common Bootstrap shadows)opacity → opacity-25/50/75/100z-index → z-n1/0/1/2/3 (Bootstrap 5.3 values)cursor → cursor-pointerpointer-events → pe-none/autouser-select → user-select-all/auto/noneobject-fit → object-fit-contain/cover/fill/scale/nonevertical-align → align-top/middle/bottom/baseline/text-topAll supported utilities work with Bootstrap's responsive breakpoints:
@media (min-width: 576px) → sm-* classes@media (min-width: 768px) → md-* classes@media (min-width: 992px) → lg-* classes@media (min-width: 1200px) → xl-* classes@media (min-width: 1400px) → xxl-* classespx (16px base), rem, em, vh, vw% for widths, heights, positionsauto, none, inherit, initialThe tool maps CSS values to Bootstrap 5.3 spacing scale:
| CSS Value | Bootstrap Class | Rem Equivalent |
|---|---|---|
0 | m-0, p-0 | 0 |
0.25rem | m-1, p-1 | 0.25rem |
0.5rem | m-2, p-2 | 0.5rem |
1rem | m-3, p-3 | 1rem |
1.5rem | m-4, p-4 | 1.5rem |
3rem | m-5, p-5 | 3rem |
| Media Query | Bootstrap Breakpoint | Class Prefix |
|---|---|---|
@media (min-width: 576px) | sm | sm-* |
@media (min-width: 768px) | md | md-* |
@media (min-width: 992px) | lg | lg-* |
@media (min-width: 1200px) | xl | xl-* |
@media (min-width: 1400px) | xxl | xxl-* |
| CSS Value | Bootstrap Class | Rem Equivalent |
|---|---|---|
0.875rem or smaller | fs-6 | 14px |
1rem | fs-5 | 16px |
1.125rem | fs-4 | 18px |
1.25rem | fs-3 | 20px |
1.5rem | fs-2 | 24px |
2rem | fs-1 | 32px |
| CSS Value | Bootstrap Class | Rem Equivalent |
|---|---|---|
2.5rem+ | display-1 | 40px+ |
2rem+ | display-2 | 32px+ |
1.75rem+ | display-3 | 28px+ |
1.5rem+ | display-4 | 24px+ |
1.25rem+ | display-5 | 20px+ |
1.125rem+ | display-6 | 18px+ |
| CSS Value | Bootstrap Class |
|---|---|
1 | lh-1 |
1.25 | lh-sm |
1.5 | lh-base |
2 | lh-lg |
| CSS Value | Bootstrap Class |
|---|---|
100-300 | fw-lighter |
400-500 | fw-normal |
600-800 | fw-bold |
900 | fw-bolder |
The tool uses intelligent logic to preserve layout-critical properties:
.complex-component {
/* PRESERVED - Layout critical */
position: absolute;
z-index: 999;
transform: rotate(45deg);
/* CONVERTED - Have Bootstrap equivalents */
display: flex; → d-flex
margin: 1rem; → m-3
padding: 0.5rem; → p-2
font-weight: 600; → fw-semibold
text-align: center; → text-center
}
Automatically skips Bootstrap component classes to prevent conflicts:
<!-- These classes are NEVER modified -->
<button class="btn btn-primary dropdown-toggle">Click me</button>
<div class="navbar navbar-expand-lg">Navigation</div>
<ul class="dropdown-menu">Menu items</ul>
css2bs/
├── bin/
│ └── cli.js # CLI entry point
├── src/
│ ├── index.js # Main processing logic
│ └── mappers.js # CSS to Bootstrap mapping
├── package.json
└── README.md
$ css2bs public/css/main.css resources/views
Updated files: 12
• /resources/views/about.blade.php
• /resources/views/contact.blade.php
• /resources/views/home.blade.php
• /resources/views/services.blade.php
• /resources/views/layout/header.blade.php
• /resources/views/layout/footer.blade.php
• /resources/views/layout/master.blade.php
• /resources/views/components/hero.blade.php
• /resources/views/components/card.blade.php
Class mappings:
hero-section => bg-light d-flex justify-content-center align-items-center mx-auto my-4 p-4 fs-3 fw-semibold text-center text-decoration-underline position-relative rounded-3 shadow-sm md-fs-1 md-p-5 md-text-start
card-component => bg-white border border-1 d-block mx-3 p-3 rounded-2 shadow-sm
navigation-item => d-inline-block fw-medium me-3 text-decoration-none
footer-links => d-flex flex-column gap-2 list-unstyled m-0 p-0
section-title => fs-2 fw-bold mb-4 text-center lg-fs-1 lg-text-start
Removed declarations: 127, removed empty rules: 38
CSS lines reduced: -412 (2166 -> 1754)
🎉 Successfully converted 67 CSS properties to 89 Bootstrap utility classes!
💾 Reduced CSS file size by 19%
🚀 Enhanced responsive design with breakpoint utilities
🛡️ Preserved 23 layout-critical properties
.blade.php files.php files.blade.html files.my-class.class1.class2.class:hover (pseudo part ignored).parent .child✅ 100+ CSS properties with direct Bootstrap 5.3 utility equivalents
✅ Responsive breakpoints for all supported utilities
✅ Standard CSS values that map to Bootstrap's design system
✅ Class selectors found in your Blade templates
🛡️ Layout-critical properties: position, z-index, transform (complex), animation
🛡️ Custom values: Pixel widths, custom colors, complex gradients
🛡️ Bootstrap components: .btn, .navbar, .dropdown-* etc.
🛡️ Complex selectors: Pseudo-elements (::before), attribute selectors
🛡️ CSS not in templates: Only processes classes that exist in Blade files
var(--custom) values are preserved as-is>, +, ~) processed conservatively-webkit-, -moz- properties are not convertedThis project is licensed under the MIT License.
If you encounter any issues or have questions:
🎉 Initial Release: Comprehensive CSS-to-Bootstrap conversion tool
🚀 New Features:
🛡️ Safety Improvements:
position, z-index, transform)🔧 Technical Enhancements:
🔮 Future Releases:
npm install -g css2bscss2bs path/to/styles.css path/to/views🎨 Made with ❤️ for Laravel developers who love Bootstrap 5.3 utilities
Transform your CSS into maintainable, responsive, utility-first classes!
FAQs
CLI tool to convert CSS rules into Bootstrap utility class names
The npm package css2bs receives a total of 1 weekly downloads. As such, css2bs popularity was classified as not popular.
We found that css2bs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.