Question

I’m working on responsive version of new app and recognised that when page is displayed on the narrow version the buttons and drop-downs in top navbar just are moved under other items.

My dreamed situation in such case would be just replacing ie:

<a href="#"><i class="icon-flag"></i> Very long label of this button</a> 

with

<a href="#"><i class="icon-flag"></i></a> 

Can I achieve this with ‘raw’ Bootstrap?

The only idea I have now is to incorporate jQuery and toggling the visibility of link’s label (ie. after wrapping with span) with resize() event

<a href="#">
  <i class="icon-flag"></i> <span>Very long label of this button</span></a>

Answers for comments and conclusion

Although I didn’t specified it before, my intention is to keep possibility of custom setting the break-points. That’s why I asked about narrow version and not about phone, tablet and desktop selectors. Of course default selectors in most cases will be OK, however media queries gives me additional flexibility, which I will need.

Answer 1

It can be achieved with the default Bootstrap’s responsive classes:

<a href="#"><i class="icon-flag"></i>
      <span class="hidden-phone">Very long label of this button</span></a>

If that doesn’t meet your needs, you can use media queries to set the label to display:none; as you need

<a class="target_el" href="#"><i class="icon-flag">
      </i><span>Very long label of this button</span></a>

@media only screen and (min-width:0px) and (max-width:320px)
{
    .target_el span { display:none; }
}

else you would have to go the jQuery route.