Reference:

Get started with Bootstrap

1. Importing via CDN

Include Bootstrap’s CSS and JS: Place the <link> tag in the <head> for CSS, and the <script> tag for JavaScript bundle before the closing </body>.

<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

2. Using Bootstrap via npm

This is the go-to approach in React if you want CSS utility classes but still write HTML/JSX yourself.

Steps:

  1. Install Bootstrap:

    npm install bootstrap

  2. Import Bootstrap CSS (usually in src/index.js or src/main.jsx):

    import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

  3. Use in JSX:

    function App() {
  return <button className="btn btn-primary">Click Me</button>;
}