Hide button text in phone mode - Bootstrap

Question

I am making an application in which I would like to hide the button text in order to save valuable space in the "phone mode". All the buttons have icons, so that should be enough.

I would like to have a pure css solution, but I can not come up with anything.

This is what a button looks like:

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

I would like to add that it could also be an:

<a class="btn btn-warning"><i class="icon-trash"></i> Delete</a>

So basicly, if the responsive's mode is phone, all the text inside the .btn selector should be hidden. But the icon needs to remain.

I've tried text-ident, but that also hides the icon.

Answer 1

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:

Answer 2

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