React project css is not getting applied. Mastering React Course

React
1

Hi,
i enrolled into Mastering React course and currently on Section = Pagination, Filtering, and Sorting (01:47) on video= 4- Pagination- Displaying Pages .Somehow css is not getting applied . may be this is the reason the Like(heart) is not getting visible in table Movies. so i added “bootstrap”: “^4.1.1” into package.json and ran npm install command.

i saw below entry into package-lock.json . so that means bootstrap dependencies is added.

“bootstrap”: {
“version”: “4.6.1”,
“resolved”: “https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz”,
“integrity”: “sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==”
},

but still css is not getting applied.

later added
“maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”

still heart for showing like not visible

2

You can try to apply the bootstrap css/script (fontawesome css/script) in the index.html under the ‘public’ folder. No need to install any packages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"
      integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://kit.fontawesome.com/<your own font awesome file>.js"
      crossorigin="anonymous"
    ></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>