Similar questions to this one have been asked but they don't address a very simple example of the issue. Given the code below, a line break will be added after the closing span tag if Bootstrap 5 is being used. This isn't the case for vanilla HTML, HTML5, or when using earlier versions of Bootstrap. Does anyone know what changed in Bootstrap 5 that causes this?
I can get around the problem easily enough by wrapping the span and subsequent text in a paragraph with style="display:inline", but I am very curious about the issue.
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>Its because your placing it in a row, without a col
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>