From: Mark Otto <markdotto@gmail.com>
Date: Wed, 19 Oct 2016 01:47:49 +0000 (-0700)
Subject: add examples of images in the navbar-brand section
X-Git-Tag: v4.0.0-alpha.5~4^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c7ad18117dd4a58b52b71ca5664c6598145f246a;p=thirdparty%2Fbootstrap.git

add examples of images in the navbar-brand section
---

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 762e7f30dc..5ab50e26fd 100644
--- 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`.