Navbar

---

Default navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width inc

Inverted navbar

Modify the look of the navbar by adding .navbar-inverse.

Brand image

Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.

Forms

Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content. Use the .input-sm variant of form element to prevent navbar crashing

Buttons

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

Text / Non-nav links

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.