Question: Is it possible to show a text button as icon button in a mobile view using bootstrap?

As of now I have two buttons, based on the javascript variable I am hiding one and showing other.

```
<input type="button"  class="btn-primary" value="Remove Employee" />

```

and 

```
<a><i class="glyphicon glyphicon-remove"></i></a>

```

[Plunker Link](http://plnkr.co/edit/fzKFbzLmy4KJmihTGCPj?p=preview)

Is it possible to acheive in a single html element with help of bootstrap classes?

Answer: 
There are css classes .visible-xs and .hidden-xs that show or hide block for mobile view. I think they will help you to show/hide some part for a mobile.
As others have mentioned, I would use the bootstrap visible-xs/hidden-xs classes instead of javascript to hide/show the elements.

However, rather than create two separate buttons, you could use a media query to override the default bootstrap style on mobile screens.

```
<a class="btn btn-primary"><i class="your-icon"></i></a>

@media screen and (max-width: 767px){
     .btn-primary {
         background: transparent;
         border: none;
         /* etc */
      }
}

```

Then, you have one button that you can use for both mobile and desktop that can be styled to your liking.

As for the text in the button, you could use a ::before selector to add content for desktop screens.

```
 .btn-primary::before { 
  content: 'Remove Employee';
 }

```

If you do your media queries correctly, you'll have a regularly styled button with the text 'Remove Employee X' on desktop and an "icon-styled" button with just "X" on mobile.