How can I have a div act as if it was on a different device with Bootstrap?

Question

I'm trying to create a Twitter Bootstrap application that displays a div that shows an application at different device sizes (desktop, tablet, mobile) in our SPA with functionality existing inside and outside that needs to communicate. When clicking on the specified size, the div should resize. Like this:

The bootstrap break points are based off media queries, which are at the window level. But I'm trying to make this work on a div. If we specify a container at the div level, grid's will not stack vertically like they would if you resize the window, they just shrink.

Harder problem then it sounds like at first. :( Any ideas on how to get around this?

The easiest answer is an iFrame, so that the iFrame's window size gets resized as the div changes size and the grid stacks correctly, but thats not ideal since functionality exists in our SPA from outside and inside the div.

I would enjoy hearing a better solution to handling this!

Answer 1

Well, Bootstrap is just CSS and a bit of js written in LESS and SASS so you can modify the LESS/SASS version of Bootstrap file and replace all the media queries with a class name. The LESS preprocessor has a syntax which allows you to nest CSS declaration, for example, the following LESS declaration:

.mobile {
    .foo { ... }
    .bar { ... }
}

is equivalent to CSS:

.mobile .foo { ... }
.mobile .bar { ... }

Once you've replaced the media queries with CSS class, you'd need some JavaScript that adds the classes to the elements whose children needs to have whatever media query you want to fake out.

For additional reliability, so that the styles don't leak out to the surrounding page, you may want to use scoped CSS, but browser support for scoped CSS is rather appalling at this stage.

Answer 2

Well bootstrap has different column sizes for divs. .col-xs- .col-sm- .col-md- .col-lg- xSmall and Small and Medium and Large. These are classes for your div.

Answer 3

Well you can use JQuery for that, or you can also use knockout library for dynamic binding, which enables to use custom bindings to achieve that. Here is what I will do is by using knockout bindings

<div id="devices"> It can have bindings which can have the values desktop, tablet & mobile<div>
<div id="leftDiv">Some Code...<div>
<div id="mainDiv">View<div>

• I will read the value from div tag with id="devices" whatever it is {desktop, tablet, mobile} and can access it from the attributes defined in custom bindings

• Secondly apply some if conditions to perform the required tasks. like

  $("#mainDiv").css( apply your css );

for each conditions. Apply what ever css you wish to resize the div with id="mainDiv" in css.

Answer 4

jQuery is the easy, fast and best solution to your problem. you can use

$("#idForSize").click(function(){
   $("#idForDiv").css({'height','20px','width','30px'});
});