---
layout: page
title: Navbar
---
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
### Basics
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
### Branding
Name your company, product, or project with `.navbar-brand`.
{% example html %}
{% endexample %}
### Inline forms
Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
{% example html %}
{% endexample %}
### Containers
Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control.
{% example html %}
{% endexample %}
### Inverse color scheme
Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
{% example html %}