Refactor Breadcrumbs component

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]

1 files changed, 16 insertions, 7 deletions

diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index bfd7ef1b6..204a60c81 100644
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -8,17 +8,26 @@ Indicate the current page's location within a navigational hierarchy.
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
+Works fine with or without the usage of list markup.
+
 {% example html %}
 <ol class="breadcrumb">
-  <li class="active">Home</li>
+  <li class="breadcrumb-item active">Home</li>
 </ol>
 <ol class="breadcrumb">
-  <li><a href="#">Home</a></li>
-  <li class="active">Library</li>
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item active">Library</li>
 </ol>
-<ol class="breadcrumb" style="margin-bottom: 5px;">
-  <li><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  <li class="active">Data</li>
+<ol class="breadcrumb">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active">Data</li>
 </ol>
+<!-- Or use a div instead of a list -->
+<div class="breadcrumb">
+  <a class="breadcrumb-item" href="#">Home</a>
+  <a class="breadcrumb-item" href="#">Library</a>
+  <a class="breadcrumb-item" href="#">Data</a>
+  <span class="breadcrumb-item active">Bootstrap</span>
+</div>
 {% endexample %}