react-vite-bootstrap-tsx
v1.0.4
Published
Create React + Vite + Bootstrap starter from MSG repo
Maintainers
Readme
React + Bootstrap + Vite + TypeScript Template This branch contains a React starter template using Bootstrap 5, built with Vite and TypeScript. It's structured for quick frontend development with classic Bootstrap components.
📁 Folder Structure
.
├── public/
├── src/
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── tailwind.config.js (unused in this branch)
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts
Note: tailwind.config.js exists but is not used in this branch. You can safely ignore or delete it.
🧰 Tech Stack ⚛️ React ⚡ Vite 🟦 TypeScript 🎯 Bootstrap 5 🚀 Getting Started
- Clone the Repository & Checkout the Bootstrap Branch git clone https://github.com/dharshan-kumarj/React_CSS_Frameworks_Starter/tree/Bootstrap cd React_CSS_Frameworks_Starter git checkout Bootstrap
- Install Dependencies npm install
- Start the Development Server npm run dev 🎨 Bootstrap Setup Bootstrap is installed via npm and imported into your project globally via main.tsx or index.tsx.
Install Bootstrap (if not already) npm install bootstrap Import in main.tsx or index.tsx import 'bootstrap/dist/css/bootstrap.min.css'; You can also optionally import JavaScript for components like modals and tooltips:
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; 🧪 Testing Bootstrap To verify Bootstrap is working:
Open src/App.tsx
Add a button:
Click Me Run the app and confirm the Bootstrap styles are applied. 🏗️ Build for Production npm run build Then preview the build using:
npm run preview
