Responsive Bootstrap Navbar

A Bootstrap Navbar is a navigation header that is commonly used to display branding and navigation options.

The Bootstrap Navbar can be expanded responsively at any breakpoint using the utility class navbar-expand-{bp}.

The below image shows a Navbar displayed on a large screen.

The below image shows a Navbar displayed on a small screen.

You can find how to build a Bootstrap Navbar here.

Starter App 104 includes header, a Component that uses the Bootstrap Navbar.

Steps

Create a form with a Bootstrap4 Presentation Template.

Add Nav Panel Control and give it the class navbar navbar-expand-md navbar-light.

Add a Hyperlink Control to the Nav Panel Control and give it the class navbar-toggler and custom attributes

type="button",data-target="#navbarSupportedContent",data-toggle="collapse"

Set the content of the Hyperlink Control to

<span class="navbar-toggler-icon"></span>

Add a Panel Control to the Nav Panel Control and give it the classes collapse navbar-collapse and id navbarSupportedContent.

Add a List Panel Control to the Panel Control and give it the class navbar-nav.

Add two List Item Controls with class nav-item.

Add a Hyperlink Control to each List Item Control with class nav-link.

Run the form and observe the behaviour of the Navbar at different screen sizes.

Bootstrap Components

Responsive Bootstrap Navbar

Responsive Bootstrap Dropdown

Responsive Images

Bootstrap Breakpoints

Bootstrap Column Vertical Alignment

Bootstrap Variables File

Bootstrap Responsive Column Ordering