From: Mark Otto Date: Wed, 17 Feb 2021 03:58:26 +0000 (-0800) Subject: Clarify docs around .navbar-brand (#33123) X-Git-Tag: v5.0.0-beta3~91 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5c32767e0e0dbac2d934bcdee03719a65d3f1187;p=thirdparty%2Fbootstrap.git Clarify docs around .navbar-brand (#33123) - Add new headings and text for each example - Fixes #33072 by changing align-* class --- 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 >}} -