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,
^ _ ^
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,
^ _ ^
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>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices