Tribute Page Challenge - Does Bootstrap even support having just ONE column?

1

Hi freecodecamp community,

I’m basically trying to respect the spirit of the model provided in the first challenge, so a title followed by a picture with captions, then followed by a list of achievements, a nice little recognition by another great and an invitation to visit the subject matter’s Wikipedia page. Fairly simple for now right?

Though, I can’t seem to use Bootstrap well enough to have a truly responsive design. Like, when I play with the scale of my browser’s window (on a PC) to all extremes, it doesn’t act like the model page does. It doesn’t respond well. And I don’t know what to do. Plus, all the elements are left-aligned, as are the texts. Rargh, help!

<body>
<div class="container-fluid">
  <div class="col">
    <h1>Alexander The Great</h1>
    <h2><em>The man who conquered the world.</em></h2>
	<div>
	  <a href="http://tinypic.com?ref=10740lc" target="_blank"><img src="http://i68.tinypic.com/10740lc.jpg" border="0" alt="Alexander III vs Darius III at Issus"></a>
      <p>In this image, we see Alexander the Great in battle against Darius III, his prime obstacle to reaching the eastern reaches of the world, during the Battle of Issus, in 333 BC.</p>
	</div>
	<h3>Alexander's greatest achievements:</h3>
    <ul>
      <li>Becomes Hegemon of the Greeks</li>
      <li>Secures the northern borders of Macedon</li>
      <li>Crosses the Hellespont into Asia Minor and... </li>
    </ul>
	<h3>"The young Roman gazed at the body for a time, then paid his respects by crowning the head with a golden diadem and strewing flowers on the trunk.   He was asked, “Would you now like to visit the Mausoleum of the Ptolemies?”  To which he retorted, “I came to see a king, not a row of corpses.”</h3>
    <h4><em>- Anthony Everitt, Augustus: The Life Of Rome's First Emperor</em></h2>
	<h2>If you wish to know more about Alexander's incredible achievements, you can visit his <a target="_blank" href="https://en.wikipedia.org/wiki/Alexander_the_Great" class="text-primary">Wikipedia entry</a>.</h2>
  </div>
</div>
</body>
1 Like
2

Here’s a bit more clarification. When you scale down the model tribute page, the image scales as well as the text to fit the screen horizontally, so as to just allow scrolling down, and not sideways. From what I understand, this is the point of responsive design. I just don’t understand how to apply it for a one-column setup.

1 Like
3

There isn’t really anything special about not having columns.
Here is the section of the Bootstrap docs about responsive images.

1 Like
4

Thanks a bunch for your help.

1 Like
5

Doh! i just realised I didn’t link the Bootstrap properly. That’s what’s causing the issue.

Just putting it out there for all newbies like me who may be experiencing the same difficulty.

1 Like