Highlighted

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

LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

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>.

<div class="card">

<div class="card-body">

 

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

 

</div>

</div>

Views

216

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

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>.

<div class="card">

<div class="card-body">

 

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

 

</div>

</div>

Views

217

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

could you please give all the surrounding code...

just try (for now) to change

<span style="font-weight: bold;">

by

<span style="font-weight: bold;display:inline;">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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>.

<div class="card">

<div class="card-body">

 

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

 

</div>

</div>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

Wow.  I'm gobsmacked.  That worked!

Thanks, osgood_!

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0