Navbar brand and toggler in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <code>.navbar-brand</code> class in Bootstrap?

The <code>.navbar-brand</code> class is used to style the main branding element of a navbar, usually a logo or site name, making it stand out and linking it to the homepage.

beginner

What does the navbar toggler button do in a Bootstrap navbar?

The navbar toggler button shows or hides the navigation links on smaller screens, making the navbar responsive and easy to use on mobile devices.

beginner

Which Bootstrap class is used to create the hamburger icon for the navbar toggler?

The <code>.navbar-toggler-icon</code> class creates the hamburger icon inside the toggler button.

intermediate

Why is the aria-controls attribute important on the navbar toggler button?

The aria-controls attribute links the toggler button to the collapsible menu it controls, improving accessibility for screen readers.

intermediate

How does Bootstrap know which menu to show or hide when the toggler button is clicked?

Bootstrap uses the data-bs-target attribute on the toggler button to identify the collapsible menu by its ID and toggle its visibility.

What class should you add to a link to make it the brand in a Bootstrap navbar?

A .navbar-link

B .navbar-brand

C .navbar-item

D .navbar-logo

The .navbar-brand class is specifically for the brand element in a Bootstrap navbar.

Which attribute on the toggler button specifies the menu it controls?

A aria-controls

B data-bs-toggle

C aria-expanded

D data-bs-target

The data-bs-target attribute points to the ID of the collapsible menu to toggle.

What icon appears inside the navbar toggler button by default?

A A cross (X)

B A plus sign (+)

C A hamburger icon (three horizontal lines)

D A circle

Bootstrap uses the .navbar-toggler-icon class to show a hamburger icon inside the toggler button.

Why is the navbar toggler important for mobile users?

A It shows or hides the menu to save space

B It hides the brand logo

C It disables the navbar

D It changes the navbar color

The toggler helps show or hide the menu on small screens, making navigation easier on mobile devices.

Which attribute improves accessibility by linking the toggler to the menu it controls?

A aria-controls

B aria-hidden

C aria-label

D aria-pressed

The aria-controls attribute connects the toggler button to the collapsible menu for screen readers.

Explain how the navbar brand and toggler work together to create a responsive navigation bar in Bootstrap.

Think about how the brand stays visible and the menu adapts on mobile.

Describe the role of accessibility attributes in the Bootstrap navbar toggler.

Focus on how screen readers understand the toggler.