user3736648 user3736648 - 8 months ago 36
HTML Question

Display HTML text on one line

I am coding an MVC 5 view, and I am after some text colored green, the same as the

Bootstrap class on the same line as normal text.

Here is what I have coded currently:

Test Text: <p class="text-success">Yes</p>

This however, displays the green
on the next line down rather than on the same line as the
"Test Text:"

How can I display the text on one line?

Answer Source

That should do the trick :

<p>Test Text: <span class="text-success">Yes</span></p>

Explanation : <p> is a block element, hence displaying in its block taking the whole width (if not specified otherwise in the CSS), with a new line before and after. <span> is an inline element, taking only the width that's needed and not forcing any new line.

The difference between inline and block is a very important thing in HTML/CSS. You will also discover other values for the css display property, a very usefull one being inline-block that puts together some benefits of block and some others from inline.