Bootstrap 4 small badge next to big title

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;

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

Related