What does "navbar-header" class do in Bootstrap?

Question

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?

<nav class="navbar navbar-inverse ">   <div class="container-fluid">     <div class="navbar-header">       <a href="#" class="navbar-brand">         Website Name       </a>     </div>     </div> </nav> 

Answer 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.

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.