From 5c32767e0e0dbac2d934bcdee03719a65d3f1187 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Feb 2021 19:58:26 -0800 Subject: [PATCH] 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 | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 34d43a29a745..7b57fd5c6273 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/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 >}} {{< /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 ``. {{< example >}} - {{< /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 ``. + {{< example >}} -