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?

up vote 7 down vote accepted

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

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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