How to make the bootstrap button responsive?

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
+4
source share
3 answers

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

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

+4
source

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

Example:

width: 20%;
0
source

%

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

Source: https://habr.com/ru/post/1657837/


All Articles