I’m trying to center an image within a span of 3 columns on a small row. Heres a link to my codepen:
The text div seems to center fine within its 9 column grid, but the image is justified or floating to the left on a large screen. How can I make the image stay centered within its 3 column grid? I’ve tried center-block classes, img-responsive, text-center, etc but I can’t find a solution. Do I need to nest a row within a row so it differentiates between large and small screens?
Thank you for reading and responding! Unfortunately that’s not what I’m trying to achieve. I essentially want the image and text to be side by side, but I want the image to stay centered within its three columns, regardless of the display size. For example when looking at this on a desktop, the image stays to the left rather than centering itself in its three grid allotment, if that makes sense? I want the image to center itself like the text is centered in its nine column allotment.
Edit: So I changed the col-sm-* classes to 6 each instead of 3 and 9. This does bring the image in more, but the text seems so far to the right now. I think I just need to take the time to study the grid system a bit more.
Yes it is. I actually tried to test it myself by placing some centered text below the image to see where it landed, and the image is centered. I’m currently trying the offset class to move things around to where I want them. I seem to be on the right path.