diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 34d43a29a7..7b57fd5c62 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 >}} -