Bootstrap 4 small badge next to big title

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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;