How to make responsive buttons in Bootstrap?

I have the following code for a button using Bootstrap:

<button type="button" class="btn btn-primary btn-sm">

     <span class="glyphicon glyphicon-search"></span> Search Supplies

</button>

I would like the Search Supplies content to change to just Search for mobile users when resizing. How would I achieve this using jQuery and Bootstrap?

Here's a jsbin of what I have so far.

Answers


I think Put12co22mer2's solution will work fine. But, if you want to set a specific screen size at which the "supplies" portion drops out, use CSS like this:

CSS

@media (max-width:/* Your specific width here */) {

    #supplies {

        display:none;

    }       

}

And this HTML:

HTML

<button type="button" class="btn btn-primary btn-sm">

 <span class="glyphicon glyphicon-search"></span>    
 Search <span id="supplies">Supplies</span>

</button>

Don't need jQuery :

Just wrap your word in a span with hidden-xs class

  <button type="button" class="btn btn-primary btn-sm">

    <span class="glyphicon glyphicon-search"></span> Search <span class="hidden-xs">Supplies</span>

  </button>

Need Your Help

Error code not working

hdl

Hello I am trying to implement the gate MiniALU but the howard simulator give me this error: "has no source pin". I would be happy if you can help me solve this.

Using a Task Continuation to Stack Jobs

c# winforms queue task-parallel-library

All, I have a mathod called TaskSpin that runs the passed method on a background thread using TPL.