Bootstrap font is different in react

user_9549404 0
Viewed 1040

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...

bootstrap-4 reactjs css
3 Answers

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';
user_67818890

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

user_52685040

You can dominate with important;

example:

font-family: 'Lilita One'!important;

user_91950010
Related