"Build a Tribute Page" Project

1

OK, I’m kind of stuck with my “Build a Tribute Page” project.
Here is my code:

Kadir Suleymanoglu

The Man, The Legend, The Reality

<div class="row">
liftheavies.jpg960×636 62.5 KB
Exploring the skies of the Orient.
<h3 class="text-center">Here's a time line of Kadir's life:</h3>

I can’t get the text in the

centered. What gives?

Thanks for your help.

kadir

2

It would help if you included a link to the pen.

That being said, I’m assuming that you haven’t included bootstrap. Got to settings/css/quick-add and add bootstrap.

1 Like
3

Hello there!

You simply haven’t closed the .row/.column <div>'s properly—please refer to the code below, where it says <!-- NEW DIV CLOSING TAG -->.

If you are using CodePen, it is also worth noting that at the top-right corner HTML area, there is a small arrow where choosing “Tidy HTML” will, well, tidy your code up for you. If things don’t line up after tidying up, there is a good chance that you are missing a closing tag somewhere.

I don’t know if there is a solution within CodePen for automated cleanup of code, but I used to use DirtyMarkup when I just can’t spot what’s wrong.

I personally always close a tag, where necessary, as soon as I start one. If you need to copy and paste snippet of code, make it a habit to format it first before implementing it.

I hope that helps! :slight_smile:

P. S. You can use triple back-ticks (`) before and after a code block to format it:

<div class="container">
  <div class="jumbotron">
    <h1 class="text-center">Kadir Suleymanoglu</h1>
    <h2 class="text-center"><em>The Man, The Legend, The Reality</em></h2>  

    <div class="row">
      <div class="col-xs-12"> 
        <img class="img-responsive img-thumbnail" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/1/5/15be7803556908ce7542708a2b524de33306696c.jpg' />
        <div class="caption text-center">Exploring the skies of the Orient.</div><!--caption->
</div> <!--column-->
      </div><!-- NEW DIV CLOSING TAG -->
    </div><!--row--> 
    
    <h3 class="text-center">Here's a time line of Kadir's life:</h3>
    

  </div><!--jumbotron-->
</div><!--container-->
1 Like
4

Thanks guys,

I’m trying to understand how this forum thingie works. I don’t know what went wrong when I copied the code in here.

Here’s the link to my project in codepen:

Thanks

5

It looks like you have fixed the issue with centering text!

I got carried by the unclosed tag earlier and forgot about the image issue—the image-formatting class img-responsive is not part of Bootstrap 4, you will have to use the img-fluid class instead (Bootstrap Documentation). Also, the class should be applied to <img>, not the column <div>.

I hope that helps! :slight_smile:

1 Like
6

Don’t worry about it. We’ve all been where you are. This is probably the friendliest community I’ve ever encountered on the internet. Don’t be afraid to ask for help.

1 Like
7

@honmanyau mentioned how to do that earlier in the thread:

So like this:

```
\\your code goes here
function doSomethingCool() {
    do {
        somethingCool();
    }
    while (true);
}
```

:wink: