Hey everyone! I feel kind of silly for asking this (and yes I’ve looked at the suggested ‘similar topics’ and I can’t find anyone else with the same issue so I guess that makes me uniquely stupid!
Self-bashing aside, here is my actual problem:
Trying to complete the first project on codepen to create a tribute page, and while trying to create a thumbnail with a caption - which should be simple - my image just appears with text underneath it and neither elements are nested within a thumbnail box… 
& Yes I have imported bootstrap in codepen… so can you tell me what’s wrong with my code please?
<body>
<div class="jumbotron">
<h1>John Conway's Game of Life</h1>
<h3>- a tribute page</h3>
<div class="thumbnail">
<a href="">
<img src="https://ih1.redbubble.net/image.200241973.9757/flat,1000x1000,075,f.u4.jpg" alt="Glider" style="width:100%">
<div class="caption">
<p>The Glider - a symbol associated with hacker culture which morphs into more complex patterns when the Game Of Life's constraints are iteratively applied.<p></div>
</a>
</div>
</div>
</body>
https://codepen.io/jonathonq/pen/XZQooa
I’ve been reading through the documentation and I managed to get the thumbnail box surrounding the image by itself by giving it the class img-thumbnail but that still leaves the text underneath outside of that box.
Thanks! 
PS: this is my first post on here, so hello there! I’m a n00b but I really love this community and hope to become more active within it! peace!