How to align elements to Bootstrap grid?

Question

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:

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?

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).

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.