Need help on Tribute Page

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/

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

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.

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.