Trying to place multiple Bootstrap Thumbnails side-by-side - html

Question

taking a beginner HTML/Bootstrap/CSS etc. course so I'm pretty new to all of this.
I'm trying to align these three "Bootstrap Thumbnail Custom Content" elements next to each other, but I don't have any idea how: http://imgur.com/NChc9UA
I basically need to make it look like it does on their site: http://getbootstrap.com/components/#thumbnails
Here's my code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch</p>
</div>
</div>
Again, really new to this so please try to explain thoroughly. Not sure if this is an HTML or CSS issue.
Thanks for any help.

Answer 1

If you notice, each of your three code snippets above have the same parent container i.e. <div class="row">. The .row div is a block-level element with a 100% width which is why your three columns aren't getting aligned in one line. What you can do is that wrap your three columns inside one single <div class="row"> like this:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch</p>
</div>
</div>
</div>
</div>
Also, in the code which you've posted above, you were missing a lot of closing </div> tags.
Here's a demo using your code (view as full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch
</p>
</div>
</div>
</div>
</div>
jsFiddle Demo.