Here’s a clean and professional README.md file for your Bootstrap + PurgeCSS + Webpack setup with Modal and Dropdown JS support:
# Bootstrap + PurgeCSS + Webpack Setup
A minimal boilerplate for building static websites using **Bootstrap 5**, **PurgeCSS**, and **Webpack** — with support for JavaScript components like **Modal** and **Dropdown** via ES modules.
---
## 🚀 Features
- Bootstrap via NPM (no CDN)
- PurgeCSS to remove unused CSS
- Webpack for JS bundling
- Modal and Dropdown imported directly via `bootstrap/js/dist`
- Clean and production-ready output
---
## 📁 Folder Structure
my-bootstrap-site/ │ ├── src/ │ ├── css/ │ │ └── style.css # Custom CSS with Bootstrap import │ ├── js/ │ │ └── main.js # JS entry point (Modal + Dropdown) │ └── index.html # HTML file │ ├── dist/ │ ├── style.min.css # Final CSS after build │ └── bundle.min.js # Final JS bundle │ ├── postcss.config.js ├── webpack.config.js ├── .babelrc └── package.json
---
## 📦 Installation
```bash
npm install
# Build CSS and JS for production
npm run build
# Watch CSS changes
npm run watch:css
# Watch JS changes
npm run watch:jsimport Modal from 'bootstrap/js/dist/modal';
const modalElement = document.getElementById('myModal');
const myModal = new Modal(modalElement);
document.getElementById('openModalBtn')?.addEventListener('click', () => {
myModal.show();
});import Dropdown from 'bootstrap/js/dist/dropdown';
document.querySelectorAll('.dropdown-toggle').forEach((el) => {
new Dropdown(el);
});In postcss.config.js, we whitelist Bootstrap modal and dropdown classes:
safelist: {
standard: [/^modal/, /^fade/, /^show/, /^btn/, /^dropdown/, /^data-bs/],
}This ensures necessary Bootstrap classes are not removed in production.
MIT
Created with ❤️ using:
---
Let me know if you want a downloadable ZIP of this whole setup or a GitHub repository template.