The Clash of Bootstrap Spanning: Firefox Takes on Chrome and Safari

I am experiencing some strange issues with spacing in different browsers when using Bootstrap.

Firefox is showing the spans correctly, but Chrome and Safari are spanning the items across the full width of the page, which I know is a responsive behavior of Bootstrap but doesn't seem to make sense in this case.

For example, in a simple body like this:

<div class="container-fluid">
<div class="row-fluid">
    <div class="span6">
        Hello
    </div>
    <div class="span6">
        Bye
    </div>
</div>

In Firefox, 'Hello' and 'Bye' are displayed side by side. However, in Chrome and Safari, they are displayed on top of each other on separate lines.

Any thoughts on why this might be happening?

UPDATE

After checking the production version online, I can see that it works correctly in all browsers, including Chrome and Safari.

However, the issue still persists in the local versions. What could be causing this discrepancy?

htmlcsstwitter-bootstrapscaffolding

Answer №1

My knowledge of bootstrap is limited, but it appears that Chrome and Safari are interpreting those divs as display:block, while Firefox is interpreting them as display:inline-block.

Have you tried adding inline styles to test or making edits directly in Chrome's inspect element tool? For example:

<div class="span6" style="display:inline-block;">
    hello
</div>
<div class="span6" style="display:inline-block;">
    bye
</div>

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

Ways to address the issue of "$ is not a function"

Whenever I attempt to upload an image, this error message pops up: $ is not a function The source of the error can be found here: $(document).height(); ...

javascriptjqueryhtml

Is it possible to eliminate the sticky class as you scroll down?

Check out this jQuery code I wrote to remove the sticky class while scrolling down: $(window).scroll(function (e) { if ($('.main_form_wrapper').length != 0) { var window_scroll = $(window).scrollTop(); console.log(window_scro ...

jqueryhtmlcss

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

javascriptjquerycsshtmlshow-hide

JQuery Falters in Responding to Button's Click Action

Forgive me for what may seem like a silly question, but as someone new to JQuery, I have been struggling to figure out why my function is not displaying an alert when the button is clicked. Despite thorough research on Google, I haven't been able to f ...

javascriptjqueryhtmlajax

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

javascripthtmlcsssweetalert

react: implement custom context menu on videojs

Can someone assist me with adding a quality selector and disabling the right-click option in a webpage that uses videojs? I am unsure about using plugins, as there were no examples provided in react. Any guidance would be appreciated. VideoPlayer.js impor ...

javascripthtmlreactjsreact-routervideo.js

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

I utilized this HTML Code to generate a table: <div class="noten_tabelle"> <table id="grades_table" style="width:100%"> <tr> <th>Subject</th> <th>Oral</th&g ...

javascripthtmlcsshtml-table

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar img { width: 10%; height: auto; di ...

htmlcssimageweb

Django: Troubleshooting problem with offcanvas PDF preview iterations

Hey everyone! I'm in the process of creating a webpage that features a table with metadata regarding PDF files. To enhance user experience, I want to provide users with a preview of stored files in an off-canvas format. This is my HTML file setup: & ...

pythonhtmldjangopdf

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

jqueryhtmlcssjsonvue.js

What steps can I take to prevent an HTML box from appearing too close to one side of the screen?

My current goal is to achieve this layout (without the red arrows, of course): https://i.sstatic.net/Mm1rB.png However, I have encountered a CSS issue that I can't seem to figure out on my own. When I view my page, it appears like this: https://i.s ...

htmlcss

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

javascripthtmlajaxwindow

What is the process for creating a downloadable link or button?

Here's the scenario I'm dealing with: I have a dynamic website that includes a form with a "select" dropdown menu, followed by a link or button. When a user clicks on the link: If the selected option is "display," the data is shown using AJAX ...

javascriptjqueryhtmldownload

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

In my design, I have two sets of images displayed below: https://i.sstatic.net/pQytw.jpg Both sets of images have the exact same code. The only difference between the images in the first and second set is their dimensions. I aim to make all image blocks ...

htmlcssng-bootstrap

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

javascriptjqueryhtmlfacebox

When you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

I need help with creating a popover that appears when hovering over an anchor tag. Here is the code I am using: angular: 1.4.2 ui-bootstrap :0.14.2 <div class="row" ng-repeat="endorsement in endorsements| filter: {category:categorySelected}"> &l ...

javascriptcssangularjstwitter-bootstrap

Having trouble with rendering components in React and Bootstrap?

Attempting to display basic Bootstrap components using React. This corresponds to the index.html file: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="j ...

javascripthtmltwitter-bootstrapreactjs

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

csshtml

A stateless component in React must always return a valid React element or null

I am a beginner with ReactJS and I am facing an issue. My goal is to showcase Hello world using the code snippet provided below, however, I keep encountering this error message: Can someone guide me on what I might be overlooking? The following is the c ...

javascripthtmlreactjsecmascript-6jsx