rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

add examples of images in the navbar-brand section

Browse Source
This commit is contained in:
Mark Otto 2016-10-18 18:47:49 -07:00
parent a3df8ca35a
commit c7ad18117d
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/components/navbar.md
View File

@ -76,6 +76,27 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
</nav> </nav>
{% endexample %} {% endexample %}
Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
{% example html %}
<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30">
</a>
</nav>
{% endexample %}
{% example html %}
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block">
Bootstrap
</a>
</nav>
{% endexample %}
### Nav ### Nav
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`. Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.