Change button text automatically when screen is resized with Bootstrap 3

Question

Consider this codes:

HTML

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

@media only screen and (max-width: 767px) {
    button {
        content: '<i class="fa fa-plus"></i>';
    }
}

If you resize the screen horizontally, at some moment the text will get out of the button.

I want to know if is possible to change the button text automatically when the horizontal screen resizes. Something like "+ Add New Item" to only the plus signal "+" in small devices.

I'm a little noob with media queries, so I think I'm missing something or doing it wrong.

Can someone help me?

I made this fiddle for it.

Answer 1

You could do this without adding any additional media queries or CSS by using the built in responsive utilities within Bootstrap:

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button>
</div>

It adds a bit more HTML markup, but the extra data is either going in the HTML, or in the CSS, so whichever works best for you.

Answer 2

Try this working demo: JSFiddle.

Add a class to the button text, set display:none when the screen size is small enough:

<button type="button" class="btn btn-default btn-md btn-block">
    <i class="fa fa-plus"></i>
    <span class="button-text">Add New Item</span>
</button>

And CSS:

@media screen and (max-width: 300px) {
    .button-text {
        display: none;
    }
}

Suggestion: never put DOM structure or information inside CSS styles. It is hard to maintain.