What does “navbar-header” class do in Bootstrap?

What does “navbar-header” class do in Bootstrap?

I have been using .navbar-header class of Bootstrap for my navigation bars for quite a while but never bothered to wonder why. I searched online as to why we use it but didn’t find any explanation. Can someone explain what is it’s purpose?


Solution 1:

The navbar-header is mostly an architectural class for Bootstrap navbar. It allocates approximately 150px to the left of the navbar to wrap the navbar-brand and allow the brand name or logo to make use of the entire area on click or hover. But the most useful property of the navbar-header is its responsiveness to 100% width on and after 768px (tablet views). This allows the brand to be centered at the top of the viewport which it is a nicety to have to avoid your responsive menu overlapping your brand when it opens. EDIT –> The navbar-brand doesn’t respond to 100% width.

Related:  Bootstrap Modals keep adding padding-right to body after closed

But you are right, little it’s said about this class in the web, because it doesn’t per se execute a function. Most people just either leave it alone, replace it, or use it as a hook (parent) class to target the navbar-brand or any other element they wanted to include within.