The text of the shift button automatically changes when you resize the screen using Bootstrap 3

Question

Consider the following 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 point the text will exit the button.

I want to know if it is possible to automatically change the button text when resizing the horizontal screen. Something like “+ Add new item” only to the positive “+” signal on small devices.

I am a little noob with the media, so I think I missed something or did it wrong.

Can someone help me?

I made a script for this.

Answer 1

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 a DOM structure or information inside CSS styles. It is hard to maintain.

Answer 2

You can do this without adding additional media queries or CSS using the built-in responsive utilities in 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 either goes to HTML or CSS, so depending on what works best for you.

Answer 3

If you use Bootstrap, then it is as simple as sneaking into two classes.

hidden-sm and hidden-xs hide an element when the screen width is medium or small, respectively.

So simple, you want to be hidden when the screen is small, just apply these classes!

Example:

 <button class="btn btn-primary"> <span class="glyphicon glyphicon-person"></span> <span class="hidden-xs hidden-sm">Profile</span> </button> 

Answer 4

You simply create another multimedia query (the moment you think the text should change) and hide the text inside the button. Instead of placing the button where it is now, encapsulate it in a <span> and then write CSS to set the display to none when the page becomes smaller than x pixels.

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><span>Add New Item</span></button> </div> 

CSS

 @media only screen and (max-width: <change this value>) { button span { display: none; } } 

---

However, I think this should be resolved using jQuery, as there is no way to guarantee that this will work if you put the button in other places. You should try to determine whether the contents of the button are wider than the width of the button itself, and then add an “invisible” class

I changed your jsfiddle a bit, however jQuery seems a bit wrong in that (try printing the values ​​that I use in the function)

https://jsfiddle.net/ogt84jds/1/

Answer 5

I made a fiddle showing and hiding 2 different buttons, which may not be the best way, but hey, it works.

http://jsfiddle.net/xo9xkv05/

HTML

 <div class="less"> <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button> </div> <div class="more"> <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button> </div> 

CSS

 .less { display:none; } @media (max-width: 300px) { .less { display:block; } .more { display:none; } }