diff options
| -rw-r--r-- | site/content/docs/5.0/components/navbar.md | 16 |
1 files 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 34d43a29a..7b57fd5c6 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 >}} <!-- 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> |