Twitter Bootstrap Question posted in

Can I use twitter bootstrap css classes depending on screen size? (for large vs normal buttons)

With Bootstrap CSS you can define buttons to be large, small, or normal. However, in some cases I would like to use large buttons (that is, add the btn-lg class) conditionally, as in, only if the screen size is md or larger.

A clumsy workaround is to include the button twice: once with btn-lg and once without, the regular one with visible-xs-(something) and the large one with hidden-xs, see live example.

Is there a smarter way to do this? Can I define a button to use the btn-lg class only on certain display sizes, or is there some kind of ‘auto size class’ that effectively results in btn-lg in some cases and regular buttons in others?

Tags:

2

Answers


  1. 0

    I think you can use CSS for this:

    Example (btn-sm on xs screen, btn on sm screen and btn-lg on md and lg screen)

    HTML:

    <button type="button" class="btn btn-sm btn-default">Button</button>

    CSS:

    @media (min-width: 768px) {
  .btn-sm {
    padding: 6px 12px;
  }
}
@media (min-width: 992px) {
  .btn-sm {
    padding: 10px 16px;
  }
}
    Login or Signup to reply.
  2. 0

    Create a new custom class and apply the rules you want to the media breakpoints you’d like them to trigger on. Then you can use that class and also use the individual classes without them colliding with one another.

    See working example Snippet.

    body {
  text-align: center;
  padding-top: 50px;
}
/**LG Rules**/

@media (min-width: 1200px) {
  .btn.btn-mq {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
  }
}
/**SM Rules**/

@media (max-width: 1199px) {
  .btn.btn-mq {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}
/**XS Rules**/

@media (max-width: 768px) {
  .btn.btn-mq {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <h2>Default</h2>
  <div class="btn btn-danger btn-lg">BTN LG</div>
  <div class="btn btn-danger btn-sm">BTN SM</div>
  <div class="btn btn-danger btn-xs">BTN XS</div>
  <hr>
  <h2>Buttons With Media Query Rules</h2>
  <div class="btn btn-danger btn-mq">BTN LG</div>
  <div class="btn btn-danger btn-mq">BTN SM</div>
  <div class="btn btn-danger btn-mq">BTN XS</div>
  <hr>
  <h2>Button Group With Media Query Rules</h2>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
  </div>
</div>
<hr>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search