Any width to bootstrap grid convert

[jhondipto]

Can anyone help me that how i can convert a total width of a template to any css framework grid system like bootstrap or foundation? Whats the calculation i need to do?
Also how can i make a website pixel perfect? Which calculation i need?
sry for my english :(

[Paulie_D]

It’s not clear what you are asking.

Those frameworks usually work on percentage values & media queries.

There is no ‘calculation’ that I can think of that would be relevant.

Their media query pixel value can be found here: http://getbootstrap.com/css/

[jhondipto]

suppose i got a psd template of 1800 pixels.. Now how i calculate that which elements needs how many columns?

[shaneisme]

Bootstrap is set up on a 12 grid system by default, but you can change this if you wish.

At 1800 pixels, you’d be in the .col-lg- group as it covers everything ≥1200px.

So if you had a design that had two columns, one that was 2/3 of the width and one that was 1/3 the width at 1200px+, you’d use something like this:

<div class="col-lg-8">
  ... your content here for 2/3 width
</div>

<div class="col-lg-4">
  ... your content here for 1/3 width
</div>

8/12 = 2/3
4/12 = 1/3

Note – this will only affect (in Bootstrap 3) viewports larger than 1200px. If it’s below that, they’ll just stack on top of each other. So adding more grid classes helps you get through various content break points when things start to look weird.

Complete example: http://getbootstrap.com/css/#grid-example-mixed-complete

[Author]

Posts