to harmonise it with the callout given in pagination

"Go somewhere" is more descriptive of an example link, rather than a
button that triggers in-page functionality. Also makes it consistent
with all other examples in this page

...as per the text immediately preceding this example

Based on v3 http://getbootstrap.com/css/#forms-help-text, adapted to
make examples more "real life"

Use new `.breadcrumb-item` class instead of child selectors and `li` tag selectors,
so as to no longer require the usage of `<ol>`-based markup.

Rename variables to follow naming conventions:
* $breadcrumb-padding-vertical => $breadcrumb-padding-y
* $breadcrumb-padding-horizontal => $breadcrumb-padding-x

Introduce new variable: $breadcrumb-item-padding

[skip sauce]

as on first skimming over these, it may not be completely obvious

...otherwise, by the same logic, it should be "Bolded text" above. just
looks clunky...

[skip sauce]

clarify lack of support for striped and animated striped bars in
IE10+/Edge

/fyi @mdo There might be prettier/better ways of explaining these,
        but for the sake of having accurate docs for tomorrow,
        this should do in a pinch.

[skip sauce]

[skip sauce]

[ci skip]

* `.font-normal` is too generic. Rename it to `.font-weight-normal` for clarity.
* Rename `.font-bold` to `.font-weight-bold` so as to parallel `.font-weight-normal`.
* In docs, gloss "weight" term in relation to fonts for the benefit of non-typographiles.

Refs #18433

[skip sauce]

[ci skip]

[skip sauce]

[ci skip]

Closes #18141

These can be replaced by their `.text-xs-*` parallels.
This also avoids any complications from interactions between the responsive and non-responsive classes.
(e.g. `<div class="text-left text-md-right">`)

Refs #18300
[skip sauce]

[skip sauce]