CODEWITHSUNDEEP
csstwitter-bootstrap
Billa
Billa

Reputation: 5266

Bootstrap text button to a icon in mobile device

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

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

Upvotes: 2

Views: 6547

Answers (4)

ns1234
ns1234

Reputation: 771

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.

Upvotes: 0

USER10
USER10

Reputation: 974

Try this,

Use Responsive utilities http://getbootstrap.com/css/#responsive-utilities

<input type="button"  class="btn-primary hidden-xs" value="Remove Employee" />
<a href="#" class="visible-xs"><i class="glyphicon glyphicon-remove"></i></a>

Demo

Upvotes: 4

Ram kumar
Ram kumar

Reputation: 3162

You can do like this <button type="button" class="btn-primary"><i class="glyphicon glyphicon-remove"></i></button> for icon with button and for hide/show on mobile/desktop you can use these classes from bootstrap http://getbootstrap.com/css/#responsive-utilities

Upvotes: 0

iurii
iurii

Reputation: 4230

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.

Upvotes: 1

Related Questions