Bootstrap Tribute Page Help

Bootstrap Tribute Page Help
0.0 0

#1

Ok now I’m doing the tribute page the bootstrap way instead of the pure css I did before. Here’s what I done and I’m just wondering what should I do to make it similar to the example tribute page. I don’t know how to make the picture smaller and add a rounded white box around the picture too. If I’m missing anything else or have any tips please tell me. Thank-you.

<div class="container">
  <div class="jumbotron">
    <div class="?">
     <h1>Arnold Schwarzenegger</h1>
     <h4>The man that could achieve any dream</h4>
     <div class="">
       <img src="http://getwallpapers.com/wallpaper/full/e/2/6/119227.jpg">
       <p>Arnold at a competition</p>
     </div>
  </>
   
<h4>Dreams Arnold Schwarzenegger achieved</h4>
<ul>
  <li>Dreamed of moving to America</li>
  <li>Dreamed of being the best bodybuilder</li>
  <li>Dreamed of being a millionaire in business</li>
  <li>Dreamed of being a top movie star</li>
  <li>Dreamed of being the governor of California</li>
</ul>
<h5>"Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength."</h5>
<p><i>-Arnold Schwarzenegger</i></p>
<h5>If you would like to know more about him, check his <a href="#">Wikipedia</a> page</h5>
  </div>
</div>

<footer class="text-center">Written and coded by <a href="#">Me</a></footer>

My - https://codepen.io/TioW99/pen/OvVmYZ/

Example - https://codepen.io/freeCodeCamp/full/NNvBQW


#2

Hi,

I think the class img-fluid is what you’re looking for.


#3

how about the white box? surrounding the image and the text underneath it like the example one?


#4

You should check the docs in bootstrap site so you can see for yourself, right? :slight_smile: