How to make the bootstrap button responsive?

Question

I have a boot button 128 pixels wide and 30 pixels high .

When I resize the browser window, the buttons do not respond.

What am I missing?

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

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

Run codeHide result

Answer 1

To do this, you can specify the width of the buttons using multimedia queries.

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

Answer 2

Use a percentage (%) instead of the given pixels.

Example:

width: 20%;

Answer 3

%

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