Installed Bootstrap

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "5.1.3",
     "css-loader": "^6.5.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",

src/App.css

@@ -23,6 +23,6 @@
   justify-content: center;
   margin-top: 3%;
 }
-.roots {
+/*.roots {
   border-radius: 25px;
-}
+}*/

src/App.js

@@ -1,5 +1,6 @@
 import './App.css';
 import {Button} from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min'
 import data from './roots.json'
 
 function App() {
@@ -9,7 +10,7 @@ function App() {
     <div className="App">
       <h1 id="title">{data.title}</h1>
       <div id="container">
-        <Button className="roots" variant="primary"></Button>
+        <Button className="roots" variant="primary" size="lg"></Button>
         {/*{data.links.map((rootDetail, index)=>{
           if(rootDetail.type == "facebook") {
             res = <AwesomeButton className="roots"></AwesomeButton>

yarn.lock

@@ -2986,6 +2986,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"