Change viewport on changing a div width

Question

I have a form designer in my app and for the purpose of user experience I need to give the user this ability to change the viewport and see how the form would looks like in the actual form.

I am using bootstrap 3 to shape the form and using the col and row classes to manage the layouts. there is 4 button in the form with the icon of the viewport such as Desktop , Tablet , Tablet-Horizontal , Mobile.

when the user click on those buttons I add the desired class to my container div and resize it with the width property. but when I bootstrap does not detect that and don't respond to the div changes because it works with window width ( like media queries ).

here is the css:

.edit__container {
    &.container--lg {
        width: 100%;
    }

    &.container--md {
        width: 80%;
    }

    &.container--sm {
        width: 60%;
    }

    &.container--xs {
        width: 30%;
    }
}

what I tried is change the viewport meta tag with javascript and set the width to something like 200 or more, but not working.

another try was to change the window width with jquery, but no luck.

just so remember, i cannot use iframe inside my form.

Answer 1

You can add some class to your parent and override the bootstrap classes within that scope.
For example:

.edit__container {

    &.container--xs {
        width: 30%;


        @for $i from 1 to 12 {
        .col-md-#{$i} {
                width:100%;
            }
        }

    }
}

Do it for col-sm, col-lg and so on...