Inline objects becomes block while using some (hidden-xs) classes in twitter-bootstrap-3

Question

BOOTPLY HERE

I try to make some buttons text hidden to make them smaller for xs screen size.

<button class="btn navbar-btn btn-primary">
    <i class="fa fa-font"></i>
    <span class="hidden-xs">Add Text</span>
</button>

There is no problem with element hiding but now span makes my button 2 rows. Is there any way to solve this problem.

Or is there any better approach to hide button texts in bootstrap?

For the ones who still has the same problem

If you are using bootstrap 3: http://getbootstrap.com/css/#responsive-utilities

<button class="btn navbar-btn btn-primary">
    <i class="icon-picture"></i>
    <span class="visible-sm-inline visible-md-inline visible-lg-inline">Add Image</span>
</button>

If you are using bootstrap 4: http://v4-alpha.getbootstrap.com/migration/#responsive-utilities

<button class="btn navbar-btn btn-primary">
    <i class="icon-picture"></i>
    <span class="hidden-xs-down">Add Image</span>
</button>

Answer 1

Since Bootstrap 3 uses..

.hidden-xs {
    display: block !important;
}

You need to do this..

.navbar-btn .hidden-xs {
    display: inline-block !important;
}

@media (max-width: 767px) {
.navbar-btn .hidden-xs {
  display: none!important;
 }
}

to override the block display of the xs span.

http://bootply.com/103026