Bootstrap grid system responisve utility in resizable divs

Question

i tried googleing found nothing so here i'am

Lets say u have this

<div class="resizable">
    <div class='row'>
      <div class='col-xs-12 col-md-4' style='border:1px solid red;'> HELLo </div>
    </div>
</div>

this work as expected and in > md screens the col will take 33%, yet my question is.

is there a way to make col-md/col-xs respondent to its container not to the viewport in case of resizing ?

i was thinking of a simple js solution that before it starts resizing div it can record current width of .resizable, and manipulate col-xs, col-md by removing or readding according to the new size after resizing is done..

but if there is something already existent or a better solution i would love if you share it .

thanks

Current solution :

As im using jquery-ui for resizing i wrote something simple:

$(document).on('resizestop','.resizable',function(){

        $(this).find('.row').each(function(){
        var w = $(this).innerWidth();
        var c=$(this).children('div');
        if(w <= 768){
          c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
          c.attr('class', c.attr('class').replace(' col-sm-',' w-col-sm-')); 
          c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-'));
        }else if(w < 960){
          c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-'));
          c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
          c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-')); 
        }else if(w >= 960){
          c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-'));
          c.attr('class', c.attr('class').replace(' w-col-lg-',' col-lg-'));
          c.attr('class', c.attr('class').replace(' w-col-md-',' col-md-')); 
        }
      });
  });

this simply remove all col-md,col-lg if the width of parent is less than XX px, and restore it if its larger.

let me know what you think about this approach :).

note that this dictate that col-xs be the first in class, and any other responsive class follows. thanks

Answer 1

I'm not sure i understand your question well. You are probably looking for Media Queries for Elements.

I expect that your bootstrap layout is fluid (with .container-fluid). When your resizable had been defined as a percentage of the viewport (for instance wrapped in a col-md-9 which got 75% of the viewport inside a .container-fluid) you should be able to define a new set of breakpoint for your element (or .resizable).

For instance when .resizable has been wrapped in a col-md-6 its width will be 50% of the viewport, so its size will be > than 768px when the viewport > (768 x 2) now you can define a media query for that situation @media (min-width: 1536px) {} which is true when the width of the .resizable > 768px.

example

html

<div class="container-fluid">
<div class="col-md-9">
  <div class="resizable">
    <div class="row">
      <div class="col" style="border:1px solid red;"> HELLo </div>
      <div class="col" style="border:1px solid red;"> HELLo </div>
      <div class="col" style="border:1px solid red;"> HELLo </div>
    </div>
</div>
</div>
<div class="col-md-3">
  Right side
</div>
</div>

css

.resizable .row .col {
width:100%;
      } 
@media (min-width:1024px) {
/* (768 * 12) / 9 */
.resizable .row .col {
   width:50%; 
   float:left;  
            }             
}  
@media (min-width:1280px) {
/* (960 * 12) / 9 */
 .resizable .row .col { 
   width:33.33%; 
   float:left; 
  }               
}  

See also: http://www.bootply.com/YHigazGje5