Typically you will add a link back to the home page of your site. This is often done by adding the name of your organization or application to the top of the page, or your company’s or application’s logo. To add the link to your home page, you will add a navbar-header, which will contain the a element, decorated with the navbar-brand element. If you wish to add a logo, reference the image in your hyperlink, just like you would do when making any other image a link.
To add text, and ensure the correct color scheme, use the navbar-text class on the container element.
Sample text
Links
To add normal links that are not to be considered as part of the navbar, add the navbar-link class to the aelement. The anchor must be contained inside of a navbar-text container.
Follow us!
Positioning content
You can place content on the left or right of the navbar by using navbar-left and navbar-right classes, respectively.
Follow us!
Other content
The navbar is like most every other container in Bootstrap. You are able to add buttons and other form controls as needed. We’ll discuss forms in Module 3.
Obviously, the most important part of building navigation for a website is adding navigation links. Bootstrap offers you a full range of options when displaying links to your users.
Links container
Navbar links are added into an unordered list container. This container is decorated with nav and navbar-nav. Links are then added in as list items, and use standard HMTL for creating hyperlinks. If you wish to mark a link as the current page, decorate the li element with the active class.
To add a dropdown list of links, you need to add three components.
The first will be a new list item, just like before, but this time you will decorate it with the dropdown class; this will be the container for the entire dropdown component.
The second will be a link that will toggle the dropdown list, which is decorated with three attributes, class=’dropdown-toggle’, role=’button’, data-toggle=’dropdown’.
Finally, the content for the dropdown will be placed inside of an unordered list container, and decorated with the dropdown-menu class. To add links to the dropdown, you will add them to this container, just like you did when adding links to the navbar.
I learn HTML5 