add examples of images in the navbar-brand section

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 762e7f30dc11e91377187b92d6bf6ec2305d6679..5ab50e26fd00c87abebe6cd59372ce6a56eef23d 100644 (file)
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -76,6 +76,27 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 </nav>
 {% endexample %}
 
+Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
+
+{% example html %}
+<!-- Just an image -->
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">
+    <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30">
+  </a>
+</nav>
+{% endexample %}
+
+{% example html %}
+<!-- Image and text -->
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">
+    <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block">
+    Bootstrap
+  </a>
+</nav>
+{% endexample %}
+
 ### Nav
 
 Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.