Search within TutorialsPark

Twitter Bootstrap Navigations Bars


To Create Navigation Bars using Various Reuseable Components


Twitter Bootstrap: Default Navigation (Responsive)

1. Bootstrap Navbars are components that can be used as navigation headers for your websites or app. It collapses in mobile views and becomes horizontal as the width of viewport increases beyound 768px.

The code below demonstrates it clearly.

Example: Twitter Bootstrap Default Navigation responsive to screen sizes

Give it a TRY! »

Twitter Bootstrap: Forms on a Navigation Bar

1. An Inline Search form or other form content can be included within the navigation using class .navbar-form

2. The alignment within the navbar is set by adding class .navbar-left for left and .navbar-right for right alignment.

Example:Twitter Bootstrap Forms on a Navigation Bar

Give it a TRY! »

Twitter Bootstrap: Buttons on a Navigation Bar

1. To create button center in the navbar add class .navbar-btn to the <button> element, outside the <form> element.

Example:Twitter Bootstrap Buttons on a Navigation Bar

Give it a TRY! »

Twitter Bootstrap: Text on a Navigation Bar

1. You can wrap some relevant text string using class .navbar-text within the element <p> element to have a proper leading and color.

Example:Twitter Bootstrap Text on Navigation Bar

Give it a TRY! »

Twitter Bootstrap: Always on Top Navigation Bar

1.A navigation bar always fixed at the top can be created using the class .navbar-fixed-top

2. And then including a .container or .container-fluid to center and pad the contents of the navigation bar.

Example:Twitter Bootstrap Always on Top Navigation Bar

Give it a TRY! »

Twitter Bootstrap: Always at the Bottom Navigation Bar

1.A navigation bar always fixed at the bottom can be created using the class .navbar-fixed-bottom

2. And then including a .container or .container-fluid to center and pad the contents of the navigation bar.

Example:Twitter Bootstrap Navigation Pills with Drop Downs

Give it a TRY! »

Twitter Bootstrap: Navigation bar static at the top

1. In order to create a full width navigation bar that bar that remains static at the top and scrolls with page use class .navbar-static-top

2. The content is centered and padding is added using the class .container or .container-fluid , you need not add any content to the body.

Example:Twitter Bootstrap Static top Navbar

Give it a TRY! »

Twitter Bootstrap : Inverted Navigation Bars

1. The look of the navbar can be altered using the .navbar-inverse with the <nav> element.

Example:Twitter Bootstrap Inverted Navigation

Give it a TRY! »