Under Bootstrap v4, <span> tag is block level display?

Report · Apr 24, 2018

Hello, all,

I am using Bootstrap v4, and I tried to isolate a user alias to make it bold text using a <span> tag. This places the user alias on its own line, sandwiched between the text prior and the text after. Was this intentional? I tried applying "display: inline-block;" and "display: inline;" to it, and it didn't help.

Any suggestions?

V/r,

^ _ ^

Report · Apr 24, 2018

is it a SPAN tag ?... so why won't you preserve it as an inline element... it will be in the text flaw... and not on an isolate line ?

Report · Apr 24, 2018

It is a span tag. For example:

On #ucase(DateTimeFormat(comDate,'dd mmm yyyy @ HH:NN'))#, #userAlias# said..

Will display as:

On 01 JAN 2018, Snow White said..

But if I do this:

On #ucase(DateTimeFormat(comDate,'dd mmm yyyy @ HH:NN'))#, <span style="font-weight: bold;">#userAlias#</span> said..

Will display as:

On 01 JAN 2018,

Snow White

said..

I have no idea why. I can only assume that Bootstrap is involved. I have no code that is forcing a span tag to it's own line.

V/r,

^ _ ^

Report · Apr 24, 2018

could you please give all the surrounding code...

just try (for now) to change

by

Report · Apr 24, 2018

when I say surounding code please include the CSS attached to the listed element (best way is to use the WDT from the browser)

Report · Apr 24, 2018

I'm using FireFox (it's also happening in IE11) DevTools, and upon using "Inspect Element", it indicates that the dimensions of the span tag are 826 x 27 pixels. I can't understand why my span tag is as wide as the container it is in.

The div that it is in has a class of "card card-body" so that it has that nice faint curved border around it. Could that be causing this?

V/r,

^ _ ^

UPDATE: Removing the classes card and card-body from the container div fixed it. But now I have no nice border for the comments.

Report · Apr 24, 2018

sorry, I tried several times to debug, remote on simple photography and imposition of hands ... but alas it does not work ... I do not know bootstrap because I do not use it ... when I tell you to send the snippets, it's code I'm talking about ... I do not see the classes that are descendants and that can be inherited ... nor the HTML nesting to which they apply ...
please can we have access to the code? at least the HTML and relative CSS

Report · Apr 24, 2018

I am using the pre-compiled Bootstrap v4 files. We aren't allowed to use compilers without them being approved by security, and that takes (on average) six months or longer.

In the header, the code is:

<!DOCTYPE html>
<html lang="en">
    <head>
          <title>blah blah blah</title>
          <link href="/style/blog.css" rel="stylesheet" />
          <link href="/style/blog2.css" rel="stylesheet" />
          <link href="/script/bs/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
          <div class="container">

The code that experiences this issue:

<cfoutput query="thisQry">
<div class="card card-body">
    On #ucase(DateTimeFormat(comDate,'dd mmm yyyy @ HH:NN'))#, <span style="font-weight: bold;">#userAlias#</span> said..
    <div>#comment_text#</div>
</div>
</cfoutput>

Removing the "card" and "card-body" classes from the div corrects this issue. I have no idea why.

V/r,

^ _ ^

Report · Apr 24, 2018

Bootstrap 4 uses flex by default. Can you surround the complete line in a <p> or <span> tag as below? so flex doesnt mess things up as its seeing the 3 sections as individual items so it stacks the lines on top of one another.

<p> On 01 JAN 2018, <span>Snow White</span> said.</p>

Other options like flex-row are available, adding it to the card card-body class but that causes issues at smaller device sizes and needs to be corrected.

Failing the above options use Bootstrap 4 how they say you are meant to use it and the problem goes away, but you gain an extra <div>.

On 01 JAN 2018, <span>Snow White</span> said.

</div>

Report · Apr 24, 2018

osgood_ wrote
Failing the above options use Bootstrap 4 how they say you are meant to use it and the problem goes away, but you gain an extra <div>.
<div class="card">
<div class="card-body">

On 01 JAN 2018, <span>Snow White</span> said.

</div>
</div>

So, just adding a second div and use one for each class should fix this??? Weird.

I'll give that a shot and see what happens. Thanks.

V/r,

^ _ ^

Report · Apr 24, 2018

Wow. I'm gobsmacked. That worked!

Thanks, osgood_!

V/r,

^ _ ^

Report · Apr 24, 2018

I did that via Web Developer Tools. It still puts the user alias on its own line.

V/r,

^ _ ^

Report · Apr 24, 2018

did you add it to a specific class or directly to the element itself... what's up just to test if you add !important to the display property ?

any chance to get the code snippet ?

Report · Apr 24, 2018

BTW.. being a database / back-end developer not well versed in CSS or CSS libraries, this is how I am with CSS:

http://devhumor.com/media/css

V/r,

^ _ ^

Under Bootstrap v4, <span> tag is block level display?

1 Correct answer