title: Bootstrap 3: Is there a way to hide navbar-text when small screens are used?
body: <p>I'm using bootstrap 3.1.1. </p>
  
  <p>I want the navbar-text to disappear on smaller screens. Currently, it looks disjointed on smaller screens. Preferably, it would just go away on smaller screens but as an alternative it could render nicely under the title.</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-brand"&gt;Brand&lt;/div&gt;
              &lt;p class="navbar-text"&gt;I want this text to disappear when screen is small&lt;/p&gt;
          &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
              &lt;u1 class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Index&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="link1.htm"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;/u1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://www.bootply.com/120371">http://www.bootply.com/120371</a></p>