vzupo vzupo - 1 month ago 13
CSS Question

How can I stack bootstrap buttons on mobile

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>




Answer

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>