How to fix a Jumbotron overlapping issue with other elements in Bootstrap 4

Recently, I decided to play around with the container, container-fluid, and jumbotron classes in Bootstrap 4. Here is the snippet of HTML code I used:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1 class="container">Lorem ipsum dolor sit amet</h1>
<h1 class="container-fluid">consectetur adipiscing elit</h1>
<span class="jumbotron">suspendisse potenti</span>
</body>
</html>

After running this code, I observed that the span element with the jumbotron class was slightly overlapping the h1 element with the container-fluid class. I am now curious to know if this overlap occurred due to a bug in Firefox Quantum or if it's related to some property within the jumbotron or container-fluid classes in Bootstrap 4.

csshtmlbootstrap-4

Answer №1

According to @zgood's comment, the span is typically an inline element by default.

Here are a few key points about the span tag:

  • The <span> tag is used to group inline elements within a document.

  • The <span> tag does not have any inherent visual effects on its own.

  • The <span> tag offers a way to target and style specific parts of text or content within a document.

You inquired about why the span was overlapping the h1 element with the container-fluid class. As mentioned earlier, this is due to its inline nature.

To see a non-overlapping example, consider using a <div> instead. Here is an example showcasing this difference:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <h1 class="container">Lorem ipsum - Container</h1>
  <h1 class="container-fluid">Lorem ipsum - Container Fluid</h1>
  <div class="jumbotron">Lorem ipsum - Jumbotron</div>
</body>
</html>

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

Adding a div element dynamically in JavaScript using string concatenation (?)

While using the Google Maps API, I encountered a challenge with making a "card" appear instead of a tooltip or infobox when clicking on a marker. After following the guidance provided here, I was able to display the card. However, the method involved appen ...

javascripthtmlcssgoogle-maps

Issue with JavaScript input box not displaying text that has been typed

By using JavaScript, I am dynamically generating HTML text entry boxes. These input boxes are visible on the webpage and their border highlights when clicked. However, I am experiencing an issue where nothing appears in the input box as I type. Additional ...

javascripthtmlinput

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

I'm experiencing an issue with a div that has the dir attribute set to auto. My goal is to retrieve the rendered direction using javascript After attempting div.dir, I only receive the 'auto' value. Is there a method available to detect if ...

javascripthtml

Upon clicking the navigation link, the dropdown menu is opening and closing simultaneously

My dropdown menu is behaving strangely, opening and closing simultaneously when I click the nav link. I've been working on creating a dropdown menu, but it keeps closing on its own: Whenever I try to open the dropdown, it closes by itself, and I&apos ...

javascripthtmlcssdropdown

Send information from one webpage to another webpage using HTML

Is there a way to transfer data from one HTML file to another? I'm familiar with posting data from HTML to Python and back to HTML. In my HTML file, I have a dictionary obtained from Python using render_to_response('page.html', locals()). ...

javascriptpythonhtml

trouble with jquery radiobutton switching

When using two radio buttons to toggle the activation/inactivation of certain fields in a form, an issue arises when sending data via ajax and reopening the form without refreshing the page. The radio buttons lose their functionality and remain broken upon ...

javascriptjqueryhtmljquery-selectorsradio-button

Is there a way to prevent the CSS selector ".a.b" from targeting ".a.b.c"?

Recently, I came across some coding that looks quite similar to the html snippet provided below. <div class="a b">how_can_i_select_ab_only</div> <div class="a b disabled">how_can_i_select_ab_and_disabled_only</div> My goal is to ...

htmlcss

Troubleshooting my jquery plugins problem

I'm currently attempting to utilize a jquery plugin called ancensor. If you're interested, the plugin page can be found here My code snippet looks something like this: <nav class='navbar navbar-default' role='navigation & ...

jqueryhtmlcssascensor

Encountering foreign characters in MySQL database post data insertion

I am currently facing an issue with inserting data from inputs into my MySQL database using PHP. The problem is that when I view the data in phpMyAdmin, it appears as foreign characters. I have already configured my database to use the utf8_hungarian_ci co ...

phphtmlmysql

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

cssreactjsmaterial-ui

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...

htmlcsscss-floathtml-lists

Adding text or a <p> element to an HTML file using Express and NodeJS through a POST request

I am working on creating a simple login system using Express. The goal is to display a brief message of "Success!" or "Failure" at the bottom of the page if the user's username and password match the credentials stored in a MySQL database upon receivi ...

javascripthtmlnode.jsexpress

Having Issues with the ng-class Expression in AngularJS?

Currently, I have set up a simple table using ng-repeat to display the number of home runs versus away runs. I am using a snippet of code to apply a specific class based on which team is currently winning: <tr ng-class="{winning : game.linescore.r.home ...

htmlangularjsangularjs-ng-repeatangularjs-ng-class

Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...

javascriptjqueryhtmlcss

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. https://i.sst ...

htmlcssangular

Issue with inability to clear text in popup upon closure by jQuery

I am facing an issue with a popup menu that contains an iframe code as text. There is a button to enable the iframe code text, and I need to disable it or set it to display:none when the popup is closed. This means every time I reopen the popup, I have to ...

javascriptjqueryhtml

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

javascriptjqueryhtmlfocusoutjquery-focusout

Placing options and a clickable element within a collapsible navigation bar

Within my angular project, there are 4 input fields where users need to enter information, along with a button labeled Set All which will populate them. https://i.sstatic.net/1GGh1.png I am wondering how I can organize these input fields and the button i ...

javascripthtmlangulartypescriptbutton

Extracting URLs using Selenium from specific cells within a table

While parsing a webpage table, I noticed that one of the columns contains a hyperlink. The structure of the table is as follows: <table id="GridView1"> <tbody> <tr> ... </tr> <tr> ...

pythonhtmlseleniumpandas

Steps for making input stand out and display full content

One of the challenges I am facing is that some of my input fields are too small to display the entire text, and unfortunately, I cannot change their size. Is there a way to display the full content of the input when hovering without disrupting the layout? ...

htmlcss