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

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

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

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

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

Solutions/Answers:

Solution 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

Solution 2:

I think the best way to go around this BS3 issue is to simply add a custom media query to your css. Simply hide the span since I’m sure there might be other elements you wouldn’t want to display:block

@media (max-width:768px) {
    .navbar-btn span,
    .other-element {
        display:none;
    }
}

Solution 3:

Include the minified css below after Bootstrap 3 and use it like

<div class="hidden-xs inline-block"></div>

It only affects the .visible-xx / .hidden-xx elements which also have the .inline-block class

Related:  Adding Bootstrap to Jekyll
.inline-block{display:inline-block;}
.inline-block.visible-xs{display:none!important;}@media(max-width:767px){.inline-block.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-xs.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-xs.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-xs.visible-lg{display:inline-block!important;}
}.inline-block.visible-sm{display:none!important;}@media(max-width:767px){.inline-block.visible-sm.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-sm.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-sm.visible-lg{display:inline-block!important;}
}.inline-block.visible-md{display:none!important;}@media(max-width:767px){.inline-block.visible-md.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-md.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-md.visible-lg{display:inline-block!important;}
}.inline-block.visible-lg{display:none!important;}@media(max-width:767px){.inline-block.visible-lg.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-lg.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-lg.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-lg{display:inline-block!important;}
}.inline-block.hidden-xs{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-xs.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-xs.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-xs.hidden-lg{display:none!important;}
}.inline-block.hidden-sm{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-sm.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-sm.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-sm.hidden-lg{display:none!important;}
}.inline-block.hidden-md{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-md.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-md.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-md.hidden-lg{display:none!important;}
}.inline-block.hidden-lg{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-lg.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-lg.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-lg.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-lg{display:none!important;}}

References