Hide button text in phone mode - Bootstrap

In bootstrap 3 the hidden-phone class was changed to hidden-xs. Matter of fact, hidden- can now be used with other device size prefixes such as lg, sm etc...

For Bootstrap 4 you can use display property. As such, the classes are named using the format:

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

So your code should look like this:

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
    <i class="icon-save"></i> <span class="d-none d-sm-inline">Save</span>
</button>

The text will disappear for extra small(xs) screens:

Is this what you want?

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
    <i class="icon-save icon-white"></i>
    <span class="hidden-phone">Save</span>
</button>

Make sure you've included bootstrap-responsive.css if its not working.

I'd use the built-in twitter bootstrap class .hidden-phone.

    <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
           <i class="icon-save"></i> <span class="hidden-phone">Save</span>
    </button>

http://twitter.github.com/bootstrap/scaffolding.html#responsive