Vite React + Bootsrap Setup
npm install vite@6.2.5 –save-dev
1. C:\project-folder>npm create vite@latest or
Enter the project name, then select the framework ‘React’ and the variant ‘JavaScript’.
2. C:\project-folder>cd volunteer-connect
3. Open Project in VS Code -> ‘code .’
C:\project-folder>volunteer-connect> code .
The project has been successfully opened in Visual Studio Code, as shown in the screenshot below.
4. Install Project Dependencies
C:\project-folder>volunteer-connect>npm install
5. Start the Development Server
C:\project-folder>volunteer-connect>npm run dev
6. “Open your browser (e.g., Chrome) and visit the following URL to view the project:
http://localhost:5174“
The product is running successfully, as shown in the screenshot below.
7. Install Bootstrap CSS
C:\project-folder>volunteer-connect>npm install bootstrap
8. Open package.json:
9. Open src/main.jsx and add:
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘bootstrap/dist/js/bootstrap.bundle.min.js’;
Step 10: 💡 How to Confirm Bootstrap Is Working -> Open App.jsx add Boostrap Css Style
ClassName=“row” Creates a horizontal row.
ClassName=“col bg-primary” Creates an equal-width column with a primary bg color.
ClassName=“col bg-secondary” Creates an equal-width column with a sec bg color.
ClassName=“col bg-success” Creates an equal-width column with a green bg color.
ClassName=“col bg-danger” Creates an equal-width column with a red bg color.
Step 11: Start the Development Server “npm run dev” & test Bootstrap css style
Bootstrap CSS styles are working fine, as shown in the screenshot below.
