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"

Have you tried `container-fluid` class? That's set to go 100% of whatever it sits inside... — David Wilkinson, Jun 28 '16 at 14:04
I made [another fiddle](https://jsfiddle.net/davidgourde/68ep7rpv/) to show you that this is not working either. You can see that if you enlarge the modal window, you still have only one column, but if you enlarge the whole page, it will split into two columns even if you do not enlarge the modal window. The `col-*-*` is still not based on the modal window. That is a problem. — David Gourde, Jun 28 '16 at 14:24
It is not possible in CSS yet, you can do it in JavaScript (check the width of the window on resize and apply different classes on different sizes, then style it in CSS). Also you can think of http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen. — max, Jun 28 '16 at 15:10
Possible duplicate of [Best way to make Bootstrap responsive based on parent div?](https://stackoverflow.com/questions/18599378/best-way-to-make-bootstrap-responsive-based-on-parent-div) — MathKimRobin, Jul 10 '19 at 08:27

score 7 · Accepted Answer · edited Oct 24 '20 at 09:00

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');
    }
  });
});

Julesezaar · Answer 2 · 2020-06-10T17:24:56.730

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

Use parent div size for bootstrap responsive grid system

2 Answers2