title: adding a different sized label within h1
body: <p>I want to add a label, but I personally thing the default label is ugly. If you just do:</p>
  
  <pre><code>&lt;h1&gt;Example heading &lt;span class="label label-default"&gt;New&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>Then the label looks huge, and the bottom of the label goes below the "g" in heading. Let me elaborate on what I mean by that, "headin" have the bottoms equal, then "g"'s bottom is below that of a normal letter (like y,j,etc) and the bottom of the label goes even below that. If you still don't know what I mean look at the example on Bootstrap's site. </p>
  
  <p>Anyways what I want to do is have a smaller label, like the size you get with h3 for example, and have that label's top be aligned with the top of the text. Again let me explain, EAYlkt (well not in Stackoverflow's text) have the same "top" like I was saying with "headin"'s bottom. So I want to have a smaller label that's inline with the top, kinda like a superscript, OR be aligned with the "headin" bottom. </p>
  
  <p>I kinda get what I want with the following:</p>
  
  <pre><code>&lt;h1&gt;Heading&lt;/h1&gt;&lt;h3&gt;&lt;span class="label label-default"&gt;New&lt;/span&gt;&lt;/h3&gt;
  
  in .css
  .jumbotron h1, h3 {
      display: inline-block;
  }
  </code></pre>
  
  <p>but the bottom of label is aligned with the bottom of the "g", which is the one way I don't want. If this was confusing give me a comment and I'll try to elaborate or send you a link, but hopefully I made my point. So what can I do to get my desired effect? I apologize if this is trivial, but I've only just started learning about making webpages</p>