Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 911
Daimon Avatar asked Jun 28 '26 01:06

Daimon


2 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';
like image 172
Amruth Avatar answered Jun 29 '26 14:06

Amruth


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

like image 34
Jan Sršeň Avatar answered Jun 29 '26 13:06

Jan Sršeň



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!