rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Clarify docs around .navbar-brand (#33123)

Browse Source 
- Add new headings and text for each example
- Fixes #33072 by changing align-* class
This commit is contained in:
Mark Otto 2021-02-16 19:58:26 -08:00 committed by GitHub
parent 8f0fb394b1
commit 5c32767e0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
site/content/docs/5.0/components/navbar.md
View File

@ -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>