Trouble with my portfolio page in bootstrap 3

Trouble with my portfolio page in bootstrap 3
0

#1

I am having trouble with my about section. I use col’s to put text on the left and an image on the right. I use the img-circle class and make it inline-block width 100% height auto. There are 8 cols for the text and 4 for the img, up to small. When it’s xs it goes to 12 and 12. The text centers fine, but the img will not center. I have been trying for days and it will not center. If anyone knows what I am doing wrong, please tell me. Here is the codepen portfolio.
I am also having trouble with my portfolio. I used and example from w3 for a thumbnail image gallery. It works on w3, but not on codepen. I have tried many things, but I can’t see the captions. I also cannot get them all to be the same size. Any help would be appreciated.

Thanks


#2

In the div holding your image, add the text-center class… it also works for images, not just text.

For your captions, you have p class globally set to white… use .captions p { colour: xxx } to set the captions to the colour you want.

Your thumbnails have width and height set to 100% …since the tic tac toe game is much bigger than the rest of your thumbnails youd need to set a max-width and max-height to keep them all uniform in size,

Check out Chrome developer tools…super easy way to click on whatever is givng you the problem…it shows you right off what it is you need to adjust :slight_smile:


#3

Haiiiyo!

If I’m not mistaken it’s because of the following line:

<div class="container portrait-container">
    /* Content */
</div>

The Boostrap container class is there to provide a grid system to rows and column and are not supposed to be nested—please refer to the Container section in the Bootstrap 3 documentation; Introduction > Grid System is also a highly recommended read.

Anyhow! Once you will have removed that <div> above, simply applying .text-center to the column should do the trick; you cold also apply display: block; margin: 0 auto as CSS. :slight_smile:


#4

Good tip… I wasnt sure about the use of a container class there, so I didnt touch it and just added text-center and that worked… Im still learning bootstrap myself here so I didnt wanna call him out on that just in case :smile:


#5

Thanks, that fixed it. I made the container because I wanted a parent class for the image and I was trying to float and transition it to the middle. It didn’t work. This is much better, thanks.