# React project css is not getting applied. Mastering React Course

**URL:** https://forum.codewithmosh.com/t/react-project-css-is-not-getting-applied-mastering-react-course/9453
**Category:** React
**Created:** [December 27, 2021, 6:31am UTC](https://forum.codewithmosh.com/t/react-project-css-is-not-getting-applied-mastering-react-course/9453 "2021-12-27T06:31:37Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ashok](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@ashok](https://forum.codewithmosh.com/u/ashok)
#### Post date: [December 27, 2021, 6:31am UTC](https://forum.codewithmosh.com/t/react-project-css-is-not-getting-applied-mastering-react-course/9453/1 "2021-12-27T06:31:37Z")

</div>

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](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](http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css)”

still heart for showing like not visible

---

<div class="post-metadata">

### Author: ![kurukuru](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/kurukuru/32/2824_2.png) [@kurukuru](https://forum.codewithmosh.com/u/kurukuru)
#### Post date: [December 28, 2021, 2:03am UTC](https://forum.codewithmosh.com/t/react-project-css-is-not-getting-applied-mastering-react-course/9453/2 "2021-12-28T02:03:11Z")

</div>

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.

```auto
<!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>

```
