fix #12311

docs/components.html

@@ -1254,9 +1254,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <h2 id="navbar-default">Default navbar</h2>
   <p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
 
-  <div class="bs-callout bs-callout-info">
-    <h4>Customize the collapsing point</h4>
-    <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>
+  <div class="bs-callout bs-callout-info" id="callout-navbar-overflow">
+    <h4>Overflowing content</h4>
+    <p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
+    <ol type="a">
+      <li>Reduce the amount or width of navbar items.</li>
+      <li>Hide certain navbar items on certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.
+      <li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
+    </li>
   </div>
   <div class="bs-callout bs-callout-danger">
     <h4>Requires JavaScript</h4>