Bootstrap 3: Is there a way to hide navbar-text when small screens are used?

Question

I'm using bootstrap 3.1.1.

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.

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-brand">Brand</div>
            <p class="navbar-text">I want this text to disappear when screen is small</p>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <u1 class="nav navbar-nav">
            <li class="active"><a href="#">Index</a></li>
            <li><a href="link1.htm">Link 1</a></li>
            </u1>
        </div>
    </div>
</div>

http://www.bootply.com/120371

Answer 1

I'd suggest taking a look at the Bootstrap 3 documentation - (Responsive utilities).

There are classes, such as hidden-xs, that can be used to hide elements for certain media queries. For example, hidden-xs will hide the element when the screen is less than 768 px.

UPDATED EXAMPLE HERE

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-brand">Brand</div>
            <p class="navbar-text hidden-xs">I want this text to disappear when screen is small</p>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <u1 class="nav navbar-nav">
            <li class="active"><a href="#">Index</a></li>
            <li><a href="link1.htm">Link 1</a></li>
            </u1>
        </div>
    </div>
</div>

You could also use a combination of visible-md/visible-lg in order to hide the element when the screen is less than or equal to 992 px.