Mobile app version of vmapp.org
Login or Join
Becky351

: How to align elements to Bootstrap grid? 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

@Becky351

Posted in: #Alignment #Bootstrap #Grids #Layout

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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Becky351

1 Comments

Sorted by latest first Latest Oldest Best

 

@Caterina889

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme