I'm trying to get a small Bootstrap (4) badge next to a big title. What i've tried:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
and
<h1>Product></h1>
<span class="badge badge-primary">Version 1</span
What I want:
What is the easiest way to achieve this?
A cleaner approach would be to use the Bootstrap 4 utility classes that have been provided:
<h2 class="h3 d-inline-block">Product</h2>
<span class="badge badge-primary align-top">Version 1</span>
Output
Reading Material
display
vertical-align
Something like
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary" style="vertical-align: top">Version 1</span>
</div>
might do the trick.
You should use the first version:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
And apply the following styles on .badge
font-size: 10px;
vertical-align: top;
top: 10px; //depends on your font-size
position: relative;
In addition to the accepted answer, if you're using Bootstrap, you can also control the size of the badge using the css "text-small", "text-medium" or "text-large". Example:
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary text-medium" style="vertical-align: top">Version 1</span>
</div>
Related
I want to have each text have a different color so I used a multiple span classes to set the color in css. I also want the text to have line breaks so I used div. This fiddle shows the result I want but the div tags used for the line breaks creates a large gap. Is there another way to have line breaks with multiple span classes?
Fiddle: https://jsfiddle.net/nh7vswco/
<pre id="info">
<div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,
This fiddle has the result Fiddle: https://jsfiddle.net/nh7vswco/ but I would like to remove the gaps from the div tag.
1- There are many ways to make a line break like so: <br> or line-break CSS property.
2- To remove the gaps from the div tag. we can use the line-height: 0%;
<style>#info {
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.colon {
color: #cc7832;
}
.animal-name {
color: #2587be;
}
.animal {
color:#9473a5;
display: block;
}
.fact-card{
display: flex;
line-height: 0%;
}
.span {
font-family: Arial;
}
<pre id="info">
<div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
</pre>
This issue is actually due to the side-effects of using the pre tag. The additional spacing you have in between the divs inside your pre tag are being interpreted as line breaks as that is what pre is meant to do. If you do not want this extra spacing, eliminate the extra white space (line breaks, spaces, etc.) you have.
<pre id="info"><div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div><div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div><div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
I have this structure:
<div class="destination full">
<span class="sign">?</span>
<span class="word" data-id="0.705074201440127">this</span>
<span class="word" data-id="0.36336623481795605">is</span>
<span class="word" data-id="0.8481199104419181">magical</span>
<!-- <span class="word" data-id="0.84811991044191851">add or remove</span> -->
</div>
Note that we can add or remove word elements. The issue is to find a proper CSS solution to brig sign element in front of all other words (to create a question sentence right?) with touching word elements (I mean I still want the sentence to be meaningful)
NOTE: We can not touch the structure of the HTML .
.destination {
display: inline-flex;
gap: 0.3ch;
}
.sign {
order: 1;
}
<div class="destination full">
<span class="sign">?</span>
<span class="word" data-id="0.705074201440127">this</span>
<span class="word" data-id="0.36336623481795605">is</span>
<span class="word" data-id="0.8481199104419181">magical</span>
<!-- <span class="word" data-id="0.84811991044191851">add or remove</span> -->
</div>
I am looking for a HTML-based representation for song texts with chords above the syllables, in the following fashion:
Am C D F
There is a house in New Orleans
Now, I don't care how exactly the HTML looks like in the end, but there is an important constraint: the purpose is not only display, but also storage in a semantically meaningful representation. Specifically, the songs are converted from a LaTeX-based syntax and should be recoverable in their original form, as well as being readable in HTML and easily processable. So no fancy structure just for the purpose of presentation, and no JavaScript (yes, I have looked at how UltimateGuitar does it, that is exactly not what I want). I need every element to have a direct correspondence to some logical part, as in the original format.
On the other hand, this gives me a hard time designing a CSS that presents the stacked chords. The basic rule is that you have "boxes" consisting of a text part and a chord part, and the width of the whole box should be the maximum of either parts, which each can consist of arbitrarily long text:
Am Cmaj7/G Am G F Am/G E7 F#sus4 A
longstuff short multichord more end. e - ternal
The boxing structure is known in advance, so you can assume it as given:
((Am) (longstuff))
((Cmaj7/G) (short))
((Am G) (multichord))
((F Am/G) (more))
end.
((E7) ())
((F#sus4 A) (e))ternal
Note that in the last box, the word is hyphenated to compensate for the two chords on the first syllable. I fear this makes it very hard for CSS, so it might be represented in a slightly different way, e.g.
((F#sus4 A) (e) (ternal))
You can come up with alternatives, as long as they still have concise semantic meaning. Here is what I have come up with so far:
.verse {
line-height: 3rem;
font-family: serif;
}
.cbox {
border: 1px solid;
}
.chord {
position: absolute;
transform: translate(0, -1.1rem);
font-weight: bold;
font-family: monospace;
user-select: none;
font-size: large;
}
<p class="verse">
Test
<span class="cbox"><span class="chord">Abc</span>X</span>
<span class="cbox"><span class="chord">Abc</span>Xyzwv</span>
<span class="cbox"><span class="chord">Abc</span>Xyzw</span>abc
sd
<br/>
Test
<span class="cbox"><span class="chord">Abc De</span>Xy</span>zwv
sd
<br/>
<span class="cbox"><span class="chord">Ab</span>xyz</span>
<span class="cbox"><span class="chord">Abc#sus4/C</span>Zyzw xyz</span>
<span class="cbox"><span class="chord">Am</span>xyzw</span>
<br/>
<span class="cbox"><span class="chord">D</span>xyz</span>
<span class="cbox""><span class="chord">E7</span></span>
two
<span class="cbox"><span class="chord">E7</span>th</span>ree
</p>
The sizes and borders are chosen for debugging. As you can see, the width of the top (chord) part is not taken into account (because position: absolute prevents that).
I have tried some other variants, including this one: <span class="cbox" data-w="2" data-c="Am">longstuff</span>, where data-w is the number of letters in the chord name to be used in the min-width of the span, and data-c being put into a before pseudo-element, but I still didn't succeed at getting the width right.
For the hyphenation issue, I have no idea at all.
And I will likely be using XHTML, although I guess this won't make much of a difference.
I'd suggest using CSS grid to help keep things from overlapping.
You can specify a grid template of 1 column and 2 rows, and then use classes to tell the content which row it should fit into. The grid will fill nicely and create implicit new columns as needed. It even will work if you have a series of chords or text in a row, without needing to wrap chord/text pairs in a wrapping element.
For the hyphenation, if possible, I'd add an additional class to syllables that need hyphenation, and then create the hyphens using a pseudo element in CSS.
Here's a working example. Hope this is helpful. This was a fun challenge.
.line {
display: grid;
justify-content: start;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-auto-flow: column;
gap: 0 0.6em;
margin-bottom: 1em;
}
.chord {
grid-row-start: 1;
}
.text {
grid-row-start: 2;
}
.hyphenated:after {
content: ' - '
}
<span class="line">
<span class="chord">Am</span>
<span class="text">longstuff</span>
<span class="chord">Cmaj7/G</span>
<span class="text">short</span>
<span class="chord">Am G</span>
<span class="text">multichord</span>
<span class="chord">F Am/G</span>
<span class="text">more</span>
<span class="text">end.</span>
<span class="chord">E7</span>
<span class="chord">F#sus4 A</span>
<span class="text hyphenated">e</span>
<span class="text">ternal</span>
</span>
<hr>
<p class="verse">
<span class="line">
<span class="chord">C</span>
<span class="text">Frosty the</span>
<span class="chord">C7</span>
<span class="text">snowman</span>
</span>
<span class="line">
<span class="text">was a</span>
<span class="chord">F</span>
<span class="text">jolly</span>
<span class="chord">F#dim</span>
<span class="text">happy</span>
<span class="chord">C</span>
<span class="text">soul</span>
<span class="chord">C7</span>
</span>
<span class="line">
<span class="text">with a</span>
<span class="chord">F</span>
<span class="text">corncob</span>
<span class="chord">F#dim</span>
<span class="text">pipe and a</span>
<span class="chord">C</span>
<span class="text">button</span>
<span class="chord">A7</span>
<span class="text">nose</span>
</span>
<span class="line">
<span class="text">and two</span>
<span class="chord">Dm7</span>
<span class="text">eyes made</span>
<span class="chord">G7</span>
<span class="text">out of</span>
<span class="chord">C</span>
<span class="text">coal.</span>
<span class="chord">C7</span>
</span>
</p>
Edit: A downside to the above approach is that the content is hard to understand if unstyled.
A more semantic approach could be to combine CSS Grid with content defined in custom data-* attributes and CSS variable fallbacks. This way the chords stay stored as attributes rather than marked-up text interspersed with the lyrics.
.verse {
line-height: 2;
}
.lyric {
display: inline-grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
line-height: 1;
}
.lyric[data-chord] {
--chord: attr(data-chord);
}
.lyric:before {
content: var(--chord, '\00a0');
}
<p class="verse">
<span class="lyric" data-chord="C">Frosty the</span>
<span class="lyric" data-chord="C7">snowman</span>
<br>
<span class="lyric">was a</span>
<span class="lyric" data-chord="F">jolly</span>
<span class="lyric" data-chord="F#dim">happy</span>
<span class="lyric" data-chord="C">soul</span>
<span class="lyric" data-chord="C7"></span>
<br>
<span class="lyric">with a</span>
<span class="lyric" data-chord="F">corncob</span>
<span class="lyric" data-chord="F#dim">pipe and a</span>
<span class="lyric" data-chord="C">button</span>
<span class="lyric" data-chord="A7">nose</span>
<br>
<span class="lyric">and two</span>
<span class="lyric" data-chord="Dm7">eyes made</span>
<span class="lyric" data-chord="G7">out of</span>
<span class="lyric" data-chord="C">coal.</span>
<span class="lyric" data-chord="C7"></span>
</p>
This creates a one-column, two-row, inline grid for each .lyric span. The value of --chord is set to the value of the data-chord property only on elements that have that property. It's then used in all .lyric elements to set the content of the :before pseudo-element, with a fallback to a non-breaking space if the variable is undefined. This is important because it pushes the text into the bottom row for .lyric spans that don't have a chord, and keeps the text horizontally aligned.
I have a problem with my verified icon.
So what I actually want is that the verified Icon like on Twitter or Facebook is besides the Username and not in the next line under my username.
But it does not work.
<ul class="line">
<li>
<h3 align="center">Username</h3>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
Here is my CSS:
li.line {
list-style: none;
}
ul.line {
display: block;
}
h3 is a block element
change it to inline element
<ul class="line">
<li>
<span align="center">Username</span>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
If you don't want the list point, then I don't think li is what you'll want to use. A span or even a div could probably give you the look you're going for.
As for having them on the same line, try using the inline-block option for your css display element. It is similar to display: block, but it allows you to keep your elements on the same line.
I want to divide into 3 sections.
<li>
<font size="1">
<div>${comment.postingDate}</div>
<div>LikeLove</div>
<div><span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
</font>
</li>
But I think this is wrong design. I am new to html so was wondering how to achieve this efficiently.
The last line of the comment must look like
Date Like Love Here should be sign with count.
As per my observation you are looking for the last line in Image.
remove font tag
<div class="col">${comment.postingDate}</div>
<div class="col">
LikeLove
</div>
<div class="col">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
with style
.col{position:relative;float:left;top:0}
I think this will do
I think i got what i was looking for.
<li>
<font size="1">
<span>${comment.postingDate}</span>
<span>
Like
Love</span>
<span class="pull-right">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</span>
</font>
</li>