I am a developer and I have a doubt about grid-based PSD files given by a designer. Those files are supposed to fit the standard bootstrap 3 grid. However, I sometime receive this kind of file :

Example of grid-based psd file that I received

The widget on the left side is not aligned with the grid. However, the design is really great and I must do with it. I must use bootstrap too.

How should I manage it ? Is the best solution to modify the bootstrap grid to fit the designer's layout ? Or to use some patch-ups without modifying the standard grid ?

Thanks in advance.

  • Depending on if you need support for understanding how to manage the grid visually vs. if you need support to code the visual, your question might best belong in a different community.
    – curious
    Commented Jul 1, 2017 at 17:39

1 Answer 1


I'm not sure what you mean by "not fitting the grid", possibly that items are spaced out within the columns instead of lined up perfectly with the guides? It looks fine to me.

The way I would manage this is use the first four columns together to manage the piece with the title and dates and add padding on the left (and other directions according to the design). Then the column of text would be managed as the 8 remaining columns grouped together. I haven't worked in Bootstrap in a while but there are usually CSS classes to decide pinpoint which columns to merge together and if you need an offset, etc.

  • +1 My take as well. It is in line with the grid, 4 left columns. It just doesn't butt against a grid edge, that's all.
    – Scott
    Commented Jul 1, 2017 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.