How can I stack bootstrap buttons on mobile

css, jquery, twitter-bootstrap

Solution

Bootstrap's `.btn-group` component allows you to use eighter horizontal or vertical styled `.btn-group` at a time but not both.

Use media query and override styles.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.btn-group {margin-bottom: 10px;}

@media only screen and (max-width: 767px) {
  .btn-group {
    display: block;
  }
  
  .btn-group .btn {
    display: block;
    float: none;
    width: 100%;
  }
}

<div class="btn-group">    
  <button class="btn btn-primary" href="#intro">watch video</button>
  <button class="btn btn-primary">review info</button>
</div>
<div class="btn-group ">  
  <button class="btn btn-primary">see sample</button>
  <button class="btn btn-primary">sequence</button>
</div>

Problem

I have 4 buttons that I want to display 2x2 on web browsers and then stack on top of eachother on mobile and maybe tablet. I read about using btn-primary and secondary and also button block, but I am having no luck. Any direction on the easiest way to achieve this? ``` <div class="button-group "> <button class="btn btn-primary btn-primary page-scroll" href="#intro">watch video</button> <button class="btn btn-primary btn-secondary">review info</button> </div> <div class="button-group "> <button class="btn btn-primary btn-primary">see sample</button> <button class="btn btn-primary btn-secondary">sequence</button> </div> ```

Original source