Adding Bootstrap in React
Table of contents
No headings in the article.
To add Bootstrap to a React project, you have a few options:
1)Use a CDN (content delivery network) to include the Bootstrap CSS and JavaScript files in your index.html file.
//css tag(below title tag)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
// script tag(inside body tag)
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
2)Use a package manager like npm or yarn to install the react-bootstrap package, which allows you to use Bootstrap components as React components.
npm install react-bootstrap bootstrap
yarn add react-bootstrap bootstrap
--> Few things to remember while adding Bootstrap in React
1-Change class to className
2-Check whether all the tags are close or not.