Tribute Page - putting it right


I completed quite a lot of front end part but had a long break and I got back to finish my projects.

Here’s my tribute page:
I did not spend too much on this as I’m learning back end at the same time.

Could you please give some advise about my project? I had one big issues which was: how to center the image within a div or without and here I failed miserably…

Read this guide on how to center images.

That’s a cool image on your tribute page. :smile:

1 Like

Maybe I got it wrong,but I thought I should use Bootstrap classes

It’s looking great.

You can check some stuff here maybe it might be helpful for you.

Keep up the good work!

Normally if bootstrap doesn’t have a class to resolve your issue then you use custom css. Also, you can use custom css to modify a bootstrap class. Bootstrap class to center image is .center-block. If you look at the documentation you will notice that it’s the same css as the previous link I posted. Bootstrap tries to solve common css problems or patterns that developers use.

I already tried this class (center-block), but it did not work. Probably there is something wrong with the general template I’m using.

It’s the same after wrapping it in div:

  <div class="center-block">
   <figure class="figure ">
  <img src="" class="figure-img img-fluid rounded " alt="Discworld">
  <figcaption class="figure-caption">A world on top of a giant turtle.</figcaption>

hey, you can use center tags instead, check it here

The problem is the figure class. It has a property

display: inline-block;

You can change the figure class to .text-center.

<figure class="text-center">
// your code

It worked, I knew it’s something small :slight_smile: