Hey everyone!
I am currently doing my portfolio challenge and I am encountering some problems with my current step.
https://codepen.io/marchibald92/full/awGvdN/
So as you can see I am hoping to have two sections side by side, the div describing myself and the div with (eventually) my photo.
I am trying to get the image to sit horizontally and vertically center within its column. All efforts I have tried have failed at this. If anyone could point me in the right direction or tell me why it isn’t working that would be great! I feel like I am missing a basic concept.
You might also see that the right hand column is pushing out futher than boy of the page, this happened when I put the image in. Another problem I have been unable to solve :(.
Am i going about this the wrong way using the bootstrap grid system? Would simply floating the divs be easier for what I am trying to accomplish?
Also I went back and forward between having the image directly in the html with a ![]()
and as it is currently which is as the CSS background for the div. Any way better than the other?
Any help is greatly appreciated!
I centered image in div with id “photo” vertically and horizontally using flexbox, you can just type:
#photo { display: flex; align-items: center; justify-content: center; }
You can read more here https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
1 Like
Thanks alot! Definitley gonna brush up on my flexbox knowledge a bit, thanks for the link!
For creating the columns side by side give them the class “col-sm-4” (Remember bootstrap divides everything into 12 columns. Then when calling the ID your css should have the property “display: inline-block” for both divs (you could do this as a class for both divs as well). . If you want you should create them as a separate “row” div block to keep everything organized.
Hope that helps! The above poster has some good advice on the orientation of the text/photos.
1 Like
no problem, flexbox has now wide support in modern browsers as you can see here http://caniuse.com/#feat=flexbox - however if you would need to support some old browsers, then you would still have to use some other solutions.
I just changed col-xs-12 to col-xs-6 in both div elements and that made them go side by side.
Bootstrap uses a grid system that allows up to 12 columns across the page. If don’t want to use 12 columns and want to use maybe two instead, you would have to group sets of columns together to make it span correctly. So in this case, if you want two equal columns, you would need to use col-*-6 for both items. If you wanted one column wider than the other, you could use col-*-8 for one and col-*-4 for the other.
Hope this helps!