Help With Tribute Page Format

So I get the general gist of what I am doing, but I really hate how the formatting looks.

I’m trying to stick to bootstrap solutions since the example is done solely in bootstrap, but I’m not sure how to get the text further away from the image. I’m sure I could figure a crappy way of doing it with a bunch of

or something similar, but I was hoping to find a more elegant way of doing that.

Also, how do I make the padding of the .container on the top and bottom smaller. I don’t like how much space is between the beginning of the .container and the title text.

Here’s my version of the project.

<div class="container">
  <div class="jumbotron bg-primary">
    <h1 class="text-center"><strong>Wynton Marsalis</strong></h1>
    <h2 class="text-center"><em>The most versitile trumpet player in history</em></h2>
    <div class="img-thumbnail img-responsive"><img src="" alt="Wynton playing the trumpet." width=100%>
      <div class="caption text-center">Wynton playing his iconic Monet trumpet. </div>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-10">
        <h3>Here's a quick look at Wynton's life:</h3>
      <div class="col-md-2"></div>
      <div class="col-md-7">

        <ul class="center">
          <li><strong>1961</strong> - Born in New Orleans, Louisiana</li>
          <li><strong>1967</strong> - Receives first trumpet on his 6th birthday</li>
          <li><strong>1969</strong> - Joins the Fairview Baptist Church band led by Danny Barker</li>
          <li><strong>1975</strong> - Began performing with the New Orleans Philharmonic at age 14</li>
          <li><strong>1978</strong> - Moved to New York to attend Juilliard</li>
          <li><strong>1980</strong> - Joined the Jazz Messengers under the direction of Art Blakey</li>
          <li><strong>1981</strong> - Wynton assembled his own band and hit the road</li>
          <li><strong>1983-1984</strong> - Becomes the only person to ever win Grammy Awards in both Jazz and Classical music</li>
          <li><strong>1995</strong> - PBS premiered 'Marsalis on Music'</li>
          <li><strong>1997</strong> - Marsalis became the first jazz musician to win the Pulitzer Prize for Music</li>
          <li><strong>2000</strong> - Wins his 9th Grammy award</li>
        </ul </div>
        <div class="col-md-3"></div>
  <h2>If you have time, you should read more about this prodigious human being on his <a href="" target="blank"> Biography Page.</a></h2>

Also, any constructive criticism is welcome and appreciated. I’m super new to all of this so even if it seems super basic to you I will greatly appreciate any feedback.

I’m not sure why but the image cannot load completely. It loads 'till almost the end and then disappear :open_mouth:
Anyway the ‘alt’ fallback is displayed correctly, as the other elements of the page: if none will signal this issue again consider it as a problem of mine, not of your resource^^

The .jumbotron class has top/bottom padding of 4em and left/right padding of 2em, so you either modify the .jumbotron’s top/bottom padding or create another class which has a different padding and add this to the same div that which already has the jumbotron class.

I also recommend having top/bottom padding the same for the body and also removing the default bottom margin (2em) on the jumbotron class. Doing both of these will make the white space above and below the green container the same.

I recommend changing the font color of the anchor tag. That blue blends in with the green background.

Finally, I recommend a 2-8-2 column structure for the list section to center the list. You were using 2-7-3 which was offsetting the list to the left just a bit.
BTW - I am a huge fan of Wynton. I have seen him live many times and have most of his recordings. My tribute page was also about him.

1 Like

Thank you so much for your help! I have only been doing this for literally 2 days and I am already super impressed with this community.

I do have a follow up question. How do I go about modifying the .jumbotron’s padding in html? I feel like I could figure out a way to fix it using CSS, but the example is done entirely in html.

Also what would suggest for giving more space between the image and the text both on the top and the bottom? Again I feel like there is any easy answer, but my google-ing has not come up with anything very tidy.

Thanks again for your awesome feedback!!