refactor headings and add (x) large(r) classes

Created by: bassjobsen

The use case for the .h1, h2... to match the font styling of a heading but still want your text to be displayed inline. So these inline elements should not have a margin (or set the line-height).

After the above change you can still use <h3 class="h4"> due to the line-height and margin are already set by the h* selector. See also: https://github.com/twbs/bootstrap/issues/18492 i agree with @patrickhlauke that one should use display:inline in the case a semantic heading is needed in-line (but why should you?)

I do not agree with @cvrebert that the .h1 thru .h6 classes generate something similar to large, larger because of the h* also change the font-weight and may change / set the font-family too. So i also add new (x) large(r) classes. See also: https://github.com/twbs/bootstrap/issues/18491

Some test code below:

<h4>heading 4</h4>
<h4 class="h1">heading 4, displayed as h1</h4>
<h1>heading 4, displayed as h1</h1>

<p>
 <span class="h6">h6</span>
 <span class="h5">h5</span>
 <span class="h4">h4</span>       
 <span class="h3">h3</span>        
 <span class="h2">h2</span>       
 <span class="h1">h1</span>
</p>

<p>
 <span class="small">small</span>
 <span>Normal text (font-size h6)</span>
 <span class="larger">lager, font-size h5</span>
 <span class="large">large, font-size h4</span>
 <span class="x-large">large, font-size h3</span>
 <span class="xx-large">large, font-size h2</span>
 <span class="xxx-large">large, font-size h1</span>     
</p>

<div>some text <h1 style="display:inline;">heading 1</h1></div>

Note a more consistent option will possible be to extend the font size variables:

$font-size-lg:               1.25rem !default;
$font-size-sm:               .875rem !default;
$font-size-xs:               .75rem !default;

And declare the (x) large(r) classes and (x)smalle(r) classes with these variables.