Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output.

I would greatly appreciate any assistance in resolving this issue.

Expected Result on Microsoft Edge

Actual Result on Google Chrome

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <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>
htmlcssgoogle-chromemicrosoft-edgebootstrap-4

Answer №1

After much troubleshooting, I was able to uncover the solution!

The root of the issue stemmed from an incorrect character encoding used during file saving. Initially, Atom editor defaulted to UTF-16LE, whereas UTF-8 was actually needed.

Upon adjusting the encoding setting, the problem vanished like magic!

Answer №2

This is the page structure that I have found to work well on all browsers. You can also find it on the Bootstrap website:

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>

Answer №3

The use of "jumbotron" has been deprecated in Bootstrap 5.

If you're looking to create a jumbotron in Bootstrap 5, you can refer to this guide.

It's important to note that the code provided will no longer function with Bootstrap 5. You can find information on Bootstrap 5 at this link.

However, if you wish to continue using Bootstrap 4, the code will still work as expected by following the instructions provided at this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing these elements from being contained within particular divs?

I'm facing an issue with my HTML code and need some help unraveling what's happening. On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they a ...

htmlcss

Which is better for website footers: tables or nested ULs?

I am trying to create a footer with a specific layout that consists of item titles and images. The design I have in mind includes three columns, where the middle one is larger than the sides. The middle column should be 550px wide, while the side columns s ...

htmlcss

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

javascriptjqueryhtmlioscss

Adjusting the size of FontAwesome symbols using FitText

I recently started using FitText () to dynamically resize certain titles on my webpage. While I've had success with resizing h1, h2, and other text elements, I've run into an issue when trying to apply it to fontawesome icons. I know that FitText ...

jqueryhtmlcss

Filtering with checkboxes (looking for help with logic functionality)

Yesterday, I sought assistance with a similar question and was able to make progress based on the response provided. However, I have encountered another issue that has left me stuck. Current behavior: Clicking on a checkbox changes the background color of ...

javascripthtml

Unable to Click on Selenium Element

When a link is clicked on a website, the URL remains unchanged but a popup appears on the screen containing elements that can only be accessed after running driver.switchTo().defaultContent(). To access these elements, I have used a javascript executor com ...

javascripthtmlselenium

Achieve an overlapping effect with grid items

I'm in the process of creating a CSS grid layout where the header overlaps the next row. Below is a snippet of my code with the header positioned on top, and the linked image should give you an idea of what I'm aiming for. Thank you! https://i ...

htmlcsscss-grid

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

javascripthtmlcss

Challenges arise when media queries fail to activate properly

Greetings! I am currently working on enhancing the responsiveness of my webpage using Media Queries. However, I seem to be facing a challenge with the second image not changing as expected when I reduce the browser size. In the HTML, 'top-background- ...

htmlcssreactjsmedia-queries

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

My stored variable in the php session is not being recalled properly

Currently, my PHP script is generating new files based on user input. I want all documents to be created using the initial input to ensure consistency. In the first PHP script, I set the variable as follows: session_start(); $_SESSION["FirstName"] = $_POS ...

javascriptphphtml

Dash that serves as a barrier between two words to avoid them from breaking onto

Is there a way to keep a dash ( - ) from breaking a word when it is at the end of a line? Similar to how &nbsp; prevents a line break between two words. The issue I am facing currently is with a dynamic blog post that includes the word X-Ray. Unfortun ...

html

Utilizing Bootstrap and Javascript to efficiently handle multiple forms

My website uses Bootstrap for layout, and I need to submit a form that is duplicated for different screen sizes - one for large layouts and another for mobile. However, both forms go to the same endpoint, so I have to give them unique IDs. <div class=&q ...

javascriptjquerybootstrap-4

What is the best way to add attractive share buttons for Facebook, Twitter, and G+ on your

I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...

htmlcssfacebooktwittergoogle-plus

Turn off slider trace animation?

Check out the slider component in MUI here: https://mui.com/material-ui/react-slider/ I'm currently exploring how to disable the animation on the nub so it moves instantly to the new position. Any advice on how to achieve this? ...

cssreactjstypescriptmaterial-ui

How can I create square corners within other square corners?

https://i.sstatic.net/OsDsg.png Hey there everyone, I'm curious if it's achievable to create borders like these using only CSS, without relying on a set image. If anyone has insight on how this can be accomplished, please share your knowledge. ...

css

Caution: session_start(): Unable to initialize session cookie - headers have already been sent by (output initiated at

A warning message is displayed on the login page: "It's working in localhost but not in remote host" Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at on line 8) Warning: sess ...

phphtmlmysql

The Ajax request is frozen in the POST method

Currently, I have a basic webform consisting of textareas that are used to input data through CGI into a SQL database and this is functioning as expected. However, my issue arises from the fact that besides using <input type='submit'/> to ...

jquerypythonhtmlajaxcgi

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

I am utilizing an ajax call to retrieve an HTML page from the server; the ajax call is structured as follows: function loadHtml() { $.ajax({ type : 'GET', async : false, url : &apos ...

javascriptjqueryhtmlajax

Position an anchor image at the top left corner, no matter the DTD or browser

Is there a way to keep an image with an href fixed in the top left corner of a webpage without affecting any other content and ensuring it functions consistently across different browsers and DTDs? I am facing the challenge of needing to provide a code bl ...

htmlcss