Skip to content

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!

License

Notifications You must be signed in to change notification settings

flowaxy/bootstrap-starter

Repository files navigation

Flowaxy logo Bootstrap logo

Professional Bootstrap Starter Templates

Production-ready starter kits for Bootstrap 5 integration with modern web tools
Explore Bootstrap DocsQuick StartFeaturesDocs

Bootstrap Vite React Vue License

🌟 Key Features

🚀 Modern Tooling

  • Webpack 5, Vite 4, Parcel 2
  • TypeScript & Sass support
  • Tree-shaking optimized

🎨 Design System

  • Custom theming engine
  • Dark/light mode
  • Bootstrap Icons integrated

⚡ Performance

  • Code splitting
  • Lazy loading
  • Production-optimized builds

🚀 Quick Start

1. Create project

npx degit flowaxy/bootstrap-starter/frameworks/vue my-app
# or
npx degit flowaxy/bootstrap-starter/builders/vite my-app

2. Install dependencies

cd my-app && npm install

3. Start development

npm run dev

📂 Project Structure

bootstrap-starter/
├── core/               # Core implementations
│   ├── cdn/            # CDN-based starter
│   ├── sass/           # Sass compiler setup
│   └── esm/            # ES Modules
├── integrations/       # Framework adapters
│   ├── nextjs/         # Next.js 14+
│   ├── vue/            # Vue 3.4+
│   └── angular/        # Angular 16+
├── tooling/            # Build systems
│   ├── webpack/        # Webpack 5
│   ├── vite/           # Vite 5
│   └── parcel/         # Parcel 2
└── features/           # Advanced features
    ├── themes/         # Multi-theme support
    ├── icons/          # SVG/Icon solutions
    └── i18n/           # Localization

📊 Documentation

Core Technologies

Resource Description Link
Bootstrap Docs Official documentation View
Sass Guide Sass language reference View

Build Tools

Tool Config Guide Optimizations
Vite vite-config.md HMR, ESBuild
Webpack webpack-opt.md Code splitting
Parcel parcel-setup.md Zero config

Framework Guides

Framework Setup Guide Examples
React react-guide.md Demo
Vue vue-setup.md Demo

🎨 Theming System

// Customize Bootstrap
$primary: #6f42c1;
$enable-shadows: true;

// Dark mode variables
[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-primary: #{$primary};
}

🤝 Contributing

We welcome contributions! Please see our:

📜 License

MIT Licensed. Copyright © 2024-2025 Flowaxy Studio


Professional Bootstrap solutions for enterprise development

About

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks