How to Use Vite with Bootstrap?

Last Updated : 03 Sep, 2024

This article provides a thorough how-to for combining Vite, an innovative frontend build tool known for its quick development environment and effective build process, with Bootstrap, a popular CSS framework. To accomplish this integration, we'll look into two methods: installing Bootstrap using npm for greater control, or using the Bootstrap CDN for faster setups. Developers of all experience levels will find it simple to follow along and select the approach that best suits their needs, as both approaches will be thoroughly explained.

These are the following approaches:

Table of Content

Using Bootstrap CDN
Installing Bootstrap via npm

Steps to Set up Vite Application

Step 1: Install Vite and set up your project

npm create vite@latest my-vite-project

Step 2: Select these options

√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

Step 3: Navigate to the project

cd my-vite-project

Step 4: Install all the dependencies

npm install

Project structure:

Updated dependencies:

 "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      },

Using Bootstrap CDN

Using the Bootstrap CDN is the quickest way to integrate Bootstrap with Vite. Smaller projects or rapid prototyping are best served by this approach since it eliminates the need for extensive Bootstrap style customization. Without installing extra dependencies, you can quickly get started with Vite and Bootstrap by including it via a Content Delivery Network (CDN).

Example: This example shows the use of bootstrap in Vite by using Bootstrap CDN link.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                   initial-scale=1.0" />
    <title>Vite + Bootstrap</title>
    <!-- Bootstrap CSS via CDN -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
          crossorigin="anonymous">
</head>

<body>
    <div id="root"></div>

    <!-- Bootstrap JavaScript Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script type="module" src="/src/main.jsx"></script>
</body>

</html>

JavaScript

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

JavaScript

// src/App.jsx
import React from 'react';

function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-primary">Hello, Bootstrap with Vite!</h1>
      <button className="btn btn-success">Click Me</button>
    </div>
  );
}

export default App;

Run the Development Server:

npm run dev

Output: Visit the local development URL provided (e.g., http://localhost:5173). You should see a basic Bootstrap-styled page with a button.

Installing Bootstrap via npm

It is recommended to install Bootstrap via npm for larger applications or when you require more control over Bootstrap's styles and dependencies. By using features like tree-shaking to remove unnecessary CSS, you can better manage dependencies and customize Bootstrap.

Install Bootstrap and Its Dependencies

Navigate to your Vite project directory and install Bootstrap via npm:

npm install bootstrap

Updated dependencies:

"dependencies": {
        "bootstrap": "^5.3.3",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      },

Example: This example shows the using bootstrap with Vite by installing it through npm.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Vite + Bootstrap (npm)</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

</html>

JavaScript

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
// Import Bootstrap styles
import 'bootstrap/dist/css/bootstrap.min.css'; 
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Run the Development Server:

npm run dev

Output: Visit the local development URL provided (e.g., http://localhost:5173). The output should be a Bootstrap-styled page, similar to the CDN approach but with more flexibility.

Non-linear Components

heysaiyad

Improve

Article Tags :

How to Use Vite with Bootstrap?

Steps to Set up Vite Application

Step 1: Install Vite and set up your project

Step 2: Select these options

Step 3: Navigate to the project

Step 4: Install all the dependencies

Project structure:

Updated dependencies:

Using Bootstrap CDN

Run the Development Server:

Installing Bootstrap via npm

Install Bootstrap and Its Dependencies

Updated dependencies:

Run the Development Server:

Similar Reads

Thank You!

What kind of Experience do you want to share?