CODEWITHSUNDEEP
cssreactjsbootstrap-4
Daimon
Daimon

Reputation: 375

Bootstrap font is different in react

I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <link href="all.css" rel="stylesheet">
    <link href="autorization.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="bootstrap.bundle.min.js"></script>
  <script src="jquery.min.js"></script>
</html>

But result is another than when I open throug a regular html page. The font is different.

This is how it should be:

enter image description here

And this is what I have:

enter image description here

I don't understand why, because I didn't change css files...

Upvotes: 3

Views: 1598

Answers (3)

Eren Vardar
Eren Vardar

Reputation: 121

You can dominate with important;

example:

font-family: 'Lilita One'!important;

Upvotes: 0

Jan Sršeň
Jan Sršeň

Reputation: 1095

You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first

Upvotes: 1

Amruth
Amruth

Reputation: 5912

This could be the issue with index.js file. There you remove importing index.css line.

Remove this line in index.js file.

import './index.css';

Upvotes: 3

Related Questions