Sorry for the beginner question, but I'm having a hard time trying to figure this out. I'm using a grid for a Bootstrap design but my problem is how do I align elements to the grid? See my image for better explanation:

enter image description here

Should I consider the alignment of element 1 or 2 as the outer limit?

Another issue I face is I can align text and images to the grid, but what if text is inside a (visible) box? Should I align content to the grid or the outer box? If I align content, I face the issue seen in 4 but if I align the outer box, then I lose the grid for the content (although I think this is the correct way). How should I do this?

1 Answer 1


The Bootstrap Documentation doesn't seem to have a great example for this as far as I can tell.

I set up an example to try to visualize what Bootstrap does with the columns (I added your guide lines for comparision).

enter image description here

The gist of it is, the column div is full width (Box #4) but has left and right padding (15px) so the content of the column will be padded by that much at least. In my example I also added top and bottom padding (not standard) to make it more readable, the bootstrap documentation does this as well. This means your content will end up looking like Box #3.

So if you have content with backgrounds inside the column it will look like Box #3. If your columns have backgrounds they will look like Box #4.


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.