Twitter Bootstrap Brand Display Only in Collapse Mode - html

Question

I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
Here's what I've got:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li>Nav 1</li>
<li>Nav 2</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
<li class="divider"></li>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
Any resource might help.
Thanks for your time.
Craig

Answer 1

An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
Bootstrap 4:
Source
Bootstrap 4 alpha:
Bootstrap 3:
Example:
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
Example:
<a class="brand hidden-desktop" href="#">Navigation</a>

Answer 2

For Bootstrap 3 use the below classes
Ref: http://getbootstrap.com/css/#responsive-utilities-classes

Answer 3

Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
<a class="brand visible-xs-block" href="#">Navigation</a>
or
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of display property should be applied to this link.
This will display your Navigation brand link only when your navigation is collapsed