Use parent div size for bootstrap responsive grid system

Question

I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.

As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.

My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).

This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.

class="col-xs-12 col-sm-6"

Answer 1

As @makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by @tsdexter:

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
  });
});

Answer 2

I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries

Just copy/paste everything into a separate scss file, activate it and you are good to go

// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
@mixin make-modal-grid-columns($breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @for $i from 1 through $grid-columns {
                .col#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

.modal {
    // Overrules all .col css inside .modal-sm to a single col
    .modal-sm {
        @include make-modal-grid-columns((
            xs: 0
        ));
    }

    // modal-md (no specific class is also modal-md)
    @include make-modal-grid-columns((
        sm: $breakpoint-sm
    ));

    .modal-lg {
         @include make-modal-grid-columns((
             md: $breakpoint-lg
         ));
     }

    .modal-xl {
        @include make-modal-grid-columns((
            md: $breakpoint-lg,
            lg: $breakpoint-xl
        ));
    }
}

FYI: it generates 350 lines of code