CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsingle-page-application
tmanion
tmanion

Reputation: 401

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

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:

Desktop Example

Mobile Example

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!

Upvotes: 9

Views: 607

Answers (4)

Lie Ryan
Lie Ryan

Reputation: 64885

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.

Upvotes: 1

Sainesh Mamgain
Sainesh Mamgain

Reputation: 787

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

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

Upvotes: 0

Brandon Espinoza
Brandon Espinoza

Reputation: 37

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.

Upvotes: 1

ashishraaj
ashishraaj

Reputation: 761

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.

Upvotes: 0

Related Questions