Bootstrap CSS not working in chrome or firefox

html css google-chrome microsoft-edge bootstrap-4

20,783

Solution 1

I found the solution to the problem finally!!

This problem was caused due to the character encoding being implemented while saving the file. In Atom editor, the default saving was in UTF-16LE. But, UTF-8 was required.

Once I changed the encoding, the problem was solved.

Solution 2

use this page structure, its working for me any browser, its also available on bootstrap site :

link: https://getbootstrap.com/docs/4.0/getting-started/introduction/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

20,783

Author by

Arjun Panicker

Technology enthusiast with profound knowledge of Angular 2+ and aspiring a challenging career in Machine Learning and/or App development. My knowledge base includes: Frontend Technologies: AngularJS, Angular 2+, HTML5, CSS3, JavaScript, ES6 Backend Technologies: Microsoft SQL Server, MySQL, MongoDB (Intermediate) Other Technologies: .Net, MVC .Net, Java, Python (basics) Enthusiastic About: New technologies Technologies related to Machine Learning Implementations New App development technologies (Mobile / Web)

Updated on July 09, 2022

Comments

Arjun Panicker almost 2 years
I wrote a basic "Hello World" web page and added bootstrap CSS from CDN but it is working only in Microsoft Edge. Google Chrome and Mozilla Firefox are not displaying the correct output.

Please help me resolve this issue.

Correct Microsoft Edge Output

Incorrect Google Chrome Output
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>Shadow Shop</title>
  </head>
  <body class="container-fluid">
    <div class="jumbotron">
      <h1>Hello World</h1>
    </div>

  </body>
</html>
```
- Pete almost 7 years
  
  You look like you are using bootstrap 3 not 4 - think your tag is wrong. Also, seems to work fine in chrome for me: bootply.com/cqFLpVr9yN
- CBroe almost 7 years
  
  And the browser console has what to say? // You should probably test this via HTTP using a local web server, and not just via the file system.
- hungerstar almost 7 years
  
  The CSS is loading just fine for me. As for the JS, Bootstrap requires that you include jQuery before Bootstrap's JS.
- tao almost 7 years
  
  It might have to do with the space inside "HTML Project" directory. However, testing a website through the file system is, at best, inconclusive, as CBroe pointed out. In most cases, if you make it work through file system it will stop working on a web server and chances are the latter is how you want it to work. Also, most likely, plenty of web technologies will just not work through the file system.
- Arjun Panicker almost 7 years
  
  Ok. I will try it using a local web server namely WAMP. Thank you for the tip @CBroe and AndreiGheorghiu.