How to make bootstrap button responsive?

Question

I have bootstrap button having width of 128px and height of 30px .

When I resize my browser window, the buttons are not responsive.

What am I missing?

 .common_btn{ width: 128px; height: 30px; float: right; margin: 0 15px; } 

 <button class="btn mb-xs w-xs btn-danger common_btn " style="float:left;">New Contact</button> <button class="btn mb-xs w-xs btn-danger common_btn " >Delete</button> <button class="btn mb-xs w-xs btn-dark common_btn" >Save</button> 

Answer 1

For this you can specify the width of the buttons by using media queries.

/ For tablet and below device/ @media (max-width: 768px) { ... }

Answer 2

Use a percentage(%) instead of set pixels.

Example:

width: 20%;

Answer 3

change fixed width size in to %

.common_btn{
   width: calc( 100% - 30px) /* take total container width and reduce 30px */
   height: 30px; 
   float: right; 
   margin: 0 15px;
}