Scaling Down Bootstrap

Question

I'm trying to create a "post" creator that uses Bootstrap compatible <div>, <span>, etc tags. While the user types their post into a text box, I was hoping to create a "preview" next to it, at 1/2 page width size. So, everything inside it would be scaled down by 2.

My question: is there any way to scale down the Bootstrap elements so that it can be made into that preview? I can use jquery and such to take the input and format it dynamically onto the page, but I just need to know how to actually scale down everything.

Thanks!

If you put the contents in a container div with class row-fluid, then I think you can just use a div with class span12 and it will use 100% of the container width, so whatever the div width is set to, so will the contents. — sberry, Jan 23 '13 at 03:29
what have you tried? The css docs for bootstrap are fairly straightforward. — charlietfl, Jan 23 '13 at 03:30
Probably the cleanest/most magic way is with `transform:scale()`, check out: http://stackoverflow.com/a/6130498/398242 — Wesley Murch, Jan 23 '13 at 03:32
sberry: That'd be very easy! I'll check it out and see if it works — K. Barresi, Jan 23 '13 at 03:35
charlietfl: I wasn't sure if I would have to dive into the bootstrap code, so I haven't tried much yet. Wesley: That sounds very nice! I'll give that a shot — K. Barresi, Jan 23 '13 at 03:36

score 2 · Accepted Answer · answered Jan 23 '13 at 03:37

Supposing you can make assumptions about the target audience or set minimum browser guidelines, one option is to make use of CSS3 2D Transforms. So, for example, if you wanted your scale your preview window 50%, you could do something like:

#my-preview-div {
transform: scale(.5);
-ms-transform: scale(.5); /* IE 9 */
-webkit-transform: scale(.5); /* Safari and Chrome */
-o-transform: scale(.5); /* Opera */
-moz-transform: scale(.5); /* Firefox */      
}

Then, you could use jquery to inject the preview html into your preview div, e.g. <div id="my-preview-div"></div>.

Scaling Down Bootstrap

1 Answers1