I am looking to create a login page using both bootstrap and react. I found the perfect style on the official website. To implement this, I included all the necessary bootstrap and CSS files in my 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>
However, upon testing, I noticed that the result looked different than expected compared to opening it as a regular HTML file. The font appeared to be off.
Desired outcome:
https://i.sstatic.net/2lgab.png
Actual outcome:
https://i.sstatic.net/OSZUg.png
I'm puzzled as to why this discrepancy exists, especially since I didn't make any changes to the CSS files...