gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add navbar-brand utility information (#30010)

Browse Source
This commit is contained in:
Yash Srivastava
2019-06-24 16:10:20 +05:30
committed by Huyen Nguyen
parent 7ab2e78439
commit c03842f82b
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
guide/english/bootstrap/navigation-bar/index.md
View File

@ -52,6 +52,24 @@ You can add buttons on the navbar. The existing Bootstrap Button classes work ho
<button class="btn navbar-btn">Button</button> <button class="btn navbar-btn">Button</button>
``` ```
#### Adding brand logo or name to the navbar
The `navbar-brand` class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
```html
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
```
```html
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
```
#### Adding forms to the navbar #### Adding forms to the navbar
You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc. You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.
```html ```html
@ -170,4 +188,4 @@ Navbar Inverse:
``` ```
#### More Information: #### More Information:
[BootStrap navbar documentation](https://getbootstrap.com/docs/4.0/components/navbar/) [Bootstrap navbar documentation](https://getbootstrap.com/docs/4.0/components/navbar/)