0

I'm using Bootstrap 3 to create some HTML responsive forms, and there's one thing I'm trying to do, about layout.

I want to change dynamically the height of buttons and text fields by following these rules:

  1. On desktop devices, use small buttons / text fields
  2. On mobile devices, use large buttons / text fields

I know that I can do it by using these button and text field classes. But, I want to use these classes only if user is accessing the page from a mobile device, not always.

I know, too, that you can show/hide HTML elements by using these classes from Bootstrap Responsive Utilities, but I need to give an id to all buttons / text fields, so I don't know if I can duplicate these elements and wrap each of then inside a div that will be shown on a specific environment, since two elements with the same id is wrong by HTML specifications.

I tried an approach based on that solution, and I simply add/remove these classes based on each state/environment. It's working, but is there an easier approach to this?

Community
  • 1
  • 1
Leonardo Montenegro
  • 331
  • 3
  • 14

1 Answers1

2

To change specific element style by screen size you can use media queries. for example:

<button class="btn dynamic-button">

css:

@media (max-width: @screen-xs-max) {
    .dynamic-button {
        height: 20px;    
    }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .dynamic-button {
        height: 40px;    
    }
}
Alon Brimer
  • 111
  • 4
  • Is this pure CSS? Or LESS / SASS? – Leonardo Montenegro Aug 08 '14 at 14:32
  • Are you sure it isn't LESS? Because I tried that and it didn't worked. It seems to me that @screen-xs-max is a LESS variable, and I don't want to convert my CSS to LESS for now. However, I tried the approach from this link and it worked: http://getbootstrap.com/2.3.2/scaffolding.html#responsive. It basically changed the LESS variable to values in pixels. – Leonardo Montenegro Aug 12 '14 at 19:27