Need help on Tribute Page

Code Feedback
1

Hi,

I am doing the Tribute page.
But I don’t know how to put text just under the picture/image.

Shoudl I use “display:inline-block” or some CSS trick?

My code: https://codepen.io/theoask/full/pLbJpe/

2

you could try tag in HTML and position it in CSS.

3

I didn’t get it. The text already is unde the image.
They behave as blocks, if you put then inline the text would probably stay next to your image.

4

Bootstrap is laid out first in rows, then in columns. In pseudocode, this might look like:

<container>
  <row1>
    <column1><column2><column3>
  </row1>
  <row2>
    <column1><column2><column3>
  </row2>
</container>

If you follow those rules, you’ll be able to lay out a grid the way you want. In your case for the photo, it might look like:

<container>
  <row1>
    <column1 is empty><column2 has the picture><column3 is empty>
  </row1>
  <row2>
    <column1 is empty><column2 has the caption><column3 is empty>
  </row2>
</container>

In this way, your caption will be perfectly centered under your photo, because your columns line up.

In Bootstrap 4 there’s a better way to do what you’re asking here (cards), but you should really nail down the grid concept first.