diff options
| author | Mark Otto <[email protected]> | 2021-02-16 19:58:26 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-02-17 05:58:26 +0200 |
| commit | 5c32767e0e0dbac2d934bcdee03719a65d3f1187 (patch) | |
| tree | cec6114a2344768e26405de20a7d8928afbe24e4 | |
| parent | 8f0fb394b1dbd20630ababe7d558f5d1e9bcf63d (diff) | |
| download | bootstrap-5c32767e0e0dbac2d934bcdee03719a65d3f1187.tar.xz bootstrap-5c32767e0e0dbac2d934bcdee03719a65d3f1187.zip | |
Clarify docs around .navbar-brand (#33123)
- Add new headings and text for each example
- Fixes #33072 by changing align-* class
| -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> |