Help With Tribute Page Format

1

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="http://www.newswise.com/images/forum/uploads/2014/04/14/Wynton_3piece_med.jpg" alt="Wynton playing the trumpet." width=100%>
      <div class="caption text-center">Wynton playing his iconic Monet trumpet. </div>
    </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>
      <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>
      </div>
    </div>
  </div>
  <h2>If you have time, you should read more about this prodigious human being on his <a href="http://wyntonmarsalis.org/about/bio" target="blank"> Biography Page.</a></h2>
</div>
2

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.

3

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^^

5

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!!