What is the reason behind Bootstrap 5 inserting a line break following a span element?

Other questions similar to this one have been raised, but they do not cover a straightforward example of the problem. When looking at the code snippet below, you will notice that a line break is inserted after the closing span tag if Bootstrap 5 is utilized. This behavior does not occur with vanilla HTML, HTML5, or in earlier versions of Bootstrap. Can anyone explain what specific change in Bootstrap 5 is causing this to happen?

I can solve this issue by wrapping the span and following text within a paragraph with the style attribute set to "display:inline", but I am genuinely interested in understanding the root cause of the problem.

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617f617e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <span style="font-weight: bold">Editing User #</span>2, david
  </div>
</div>

htmlcssline-breaksbootstrap-5

Answer №1

The reason is that you are placing it in a row without a col

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61110c0c1718171504124050485d54254c7f2f38352d2c1f10170b} protected]>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <div class="col">
    <span style="font-weight: bold">Editing User #</span>2, david
    </div>
  </div>
</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

What is the best way to reuse the SELECT form multiple times?

Currently, I have an HTML page with a table containing 6 columns and around 70 rows. In column 3, I have a SELECT drop-down list in all rows with the same options. While I am familiar with C# and Java, where I can create a class and reuse it, I am fairly n ...

phpjavascripthtmlmysqlhtml-select

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

How do the HTML attribute onblur and jQuery event .trigger("blur") interact? Will both events be executed, with JavaScript this.trigger("blur") triggering first before the HTML attribute onblur, or will only one event fire? I am using ...

javascripthtmljqueryjquery-ui

css background is repeating after the height of the div is reset

I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize ...

javascriptjqueryhtmlcssbackground

What is the correct way to apply background-position percentage in this situation?

This problem has got me at my wit's end. Imagine a series of divs lined up horizontally. Each one is sized as a percentage of the total width, but that total width is unknown. For instance: --------------------------------- | | | ...

htmlcss

Transforming CSS Styles of Elements with Bootstrap

After incorporating links and scripts for Bootstrap v4.5 into my project, I quickly noticed that it automatically overrides the styles of text, buttons, and other elements I had previously customized. While I added a Bootstrap alert for authentication pur ...

htmlcssbootstrap-4

Styling the CSS tables with alternating row styles for rows 1 and 2, followed by a different style for rows 3 and 4. This pattern will repeat

I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...

css

Overlaying images on top of text

Is there a way to overlay an image on text, like a pattern image? Similar to applying color with a hex value in CSS: color: #ffffff; Any ideas on how this can be achieved? I want to have a pattern over text. https://i.sstatic.net/JaNZU.jpg Appreciate ...

javascripthtmlcss

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

Hover your mouse over the menu to activate a timeout feature

Having an issue with my multi-level menu - when I hover over a main menu item, the sub-menu items are supposed to display. However, if I move the mouse too quickly from the main item to the sub-item and it goes off the path, the sub-menu disappears and I h ...

jqueryhtmlcssmenu

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

javascripthtmlangularjsnode.js

Are you experiencing issues with the .submit() function when used in conjunction with other

Currently, I am working on a survey form that incorporates JQuery to dynamically display or hide fields based on user selections. //FORM CONDITIONALS: This script is responsible for hiding all the helpfulness radios and only displaying them when "Yes" fo ...

javascriptjqueryhtmldom

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

Focus on the image displayed through instafeed.js

Using the Instafeed.js plugin to create a dynamic Instagram feed. Everything is working smoothly, but I'm struggling to center the images being retrieved by Instafeed. Despite trying various methods, I can't seem to get it to display as desired. ...

javascripthtmlcssinstafeedjs

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligne ...

htmlcssvue.jsvuetify.js

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

javascriptjqueryhtmlcss

I am unable to click on items due to an obscure element blocking my

My selling webpage, created with Asp.net and CSS, is experiencing an issue where text boxes and hyperlinks are being overlaid, making it impossible to click on them when accessed via a mobile device. I've tried troubleshooting on my own without succes ...

cssasp.net

The header, main content, and footer sections expand to occupy the entire page

I am in need of HTML structure that looks like the following: <header></header> <div id='main'></div> <footer></footer> I want all elements to be positioned relatively. The header and footer will have fixed h ...

jquerycsshtmlpositioning

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

I recently made a decision to develop a wizard form using HTML 5 (specifically ASP.NET MVC). Below is the structure of my HTML form: @using (Html.BeginForm()) { <div class="wizard-step"> <input type="text" name="firstname" placeholder ...

javascriptjqueryhtmlasp.net-mvc-4wizard