Hi there! I’m working on my first project, the Tribute Page, and though I know I have all of the elements technically necessary to submit the project and meet the requirements, I’d really like to do AT LEAST one thing before that:
My first paragraph element’s text wraps around an image (said image has the classes of float-right and col-5 to achieve the wrapping), but every time I try and caption the image, it ends up at the top of the paragraph (although properly formatted for a caption - that is, has a different font, etc) instead of below the picture!
I have tried using bootstrap v4’s “figure” element but, despite what I’m positive is correctly a correctly syntax’d figure element, all to no avail.
I have only put a few hours into this project, but I really feel as though I’ve exhausted my other avenues…Reading and searching didn’t help, so here I am asking: is there a way to do this using purely bootstrap or am I going to have to use jquery/custom css to do it (which I have succeeded in, it just feels like an incredibly clumsy way to code what should be perfectly simply and easy using bootstrap.
I’ll put a link to my codepen project at the bottom of this post, and would really appreciate any input with one rule: please if you do look at it, keep any comments limited to the topic of captioning the image. Thank you for your time, and in advance to anyone that replies!
Of course, I forgot to add the link. 
sorry. here you go: https://codepen.io/tehDrew/pen/XRLvQr
Since your image has the float property. It does not behave consistently with the block nature of the rest of the document.
If you check it with Chrome Development tool, you’ll find that your image is not contained within the figure container, it overflows out. The common way to force float elements to stay in block containers is to give the parent element a clearfix or overflow hidden property, but in your case, the best solution is to examine how you applied the styles itself.
it’s odd that you applied the col-5 and float property to you image only, don’t you ideally want the entire figure, image, and caption, to float right and have the width of 5 columns? Therefore what you should be doing is applying the float-right and col-5 class to the container of those 2 elements, in this case, <figure>
so if you take those 2 class out of img and put it into figure, you should get what you want.
The problem essentially stems from not having more clear idea of your element hierarchy. It helps if you block out elements on a piece of paper, and you can see what elements are in containers and what you want to do to those elements
here’s more material about float that you should read to know what happened before
Excellent answer: aside from the fact that it works, it also gave me a great resource. Bookmarked that one right away.
I appreciate the time you took with your answer, and the fullness of your explanation. Cheers! 