Clarify docs around .navbar-brand (#33123)

- Add new headings and text for each example
- Fixes #33072 by changing align-* class

site/content/docs/5.0/components/navbar.md

@@ -80,6 +80,10 @@ This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-lig
 
 The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
 
+#### Text
+
+Add your text within an element with the `.navbar-brand` class.
+
 {{< example >}}
 <!-- As a link -->
 <nav class="navbar navbar-light bg-light">
@@ -96,10 +100,11 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best, a
 </nav>
 {{< /example >}}
 
-Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
+#### Image
+
+You can replace the text within the `.navbar-brand` with an `<img>`.
 
 {{< example >}}
-<!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">
@@ -109,12 +114,15 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 </nav>
 {{< /example >}}
 
+#### Image and text
+
+You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
+
 {{< example >}}
-<!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-top">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
       Bootstrap
     </a>
   </div>