Center then left align image grid in Bootstrap fluid width - html

Question

I'm using Bootstrap 3.0 with below requirements:
Each thumbnail image has fixed known width, let say 200px in this case. There could be multiple columns (if the screen is large, it could have 5-6 columns as needed).
This whole page must be fluid width
The container (.center in this case) must be center of the page
Then within the container (.grid in this case), the thumbnails themselves must be left aligned. For example, if the page fits 3 images per row but the last row only has 2 images, these 2 images must be left aligned.
I am OK to change HTML structure but no JS. Width of page and whole container is unknown.
Example 1: The number of columns is 4 in this case. The images (blue) is left aligned within the gray container which is center of the page (yellow).
Example 2: When the screen width is smaller, the images wrapped down (therefore 3 columns in this case). But the image container is still center and all images are left aligned.
My current code only does left align but the .center class literally has no effect. Somehow I need that .center class (red border) to have the width of the images inside (not full width) and then centered itself.
HTML:
<div class='col-md-12'>
<div class='center'>
<div class='grid'>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.col-md-12 {
background: yellow;
}
.center {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.grid {
text-align: left;
}
.thumbnail {
display: inline-block;
width: 215px;
max-width: none;
}
Link: http://jsfiddle.net/qhoc/Rp838/
Any help?
UPDATE 1:
Followed Matt's advise to "Wrap the whole thing in a .container". Still didn't work as you see the red border box is not center of the page.
http://jsfiddle.net/qhoc/Rp838/1/

Answer 1

finally solved it after the entire morning of going through stuff.
here is the jsfiddle for it.
http://jsfiddle.net/Rp838/9/
.menu {
display: block;
height: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
/*flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;*/
}
.menuItem {
display: inline-block;
position: relative;
margin: 0 5px 20px 5px;
max-width: 320px;
}
.menuItem img {
max-width: 100%;
}
.menuItem h2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
text-align: center;
color: white;
font: bold 1.5em/2em Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.menuItem h3 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
text-align: center;
color: white;
font: bold 1em/1.5em Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.menu li {
list-style: none;
}
.menu a {
font-weight: normal;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
.menu a:active {
text-decoration: underline;
}
<div class="menu">
<div class="menuItem">
<a href="history.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="History" />
<h2>History</h2>
</a>
</div>
<div class="menuItem">
<a href="photographs.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Photographs" />
<h2>Photographs</h2>
</a>
</div>
<div class="menuItem">
<a href="videos.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Videos" />
<h2>Videos</h2>
</a>
</div>
<div class="menuItem">
<a href="documents.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Documents" />
<h2>Documents</h2>
</a>
</div>
<div class="menuItem">
<a href="maps.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Maps" />
<h2>Maps</h2>
</a>
</div>
<div class="menuItem">
<a href="biographies.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Biographies" />
<h2>Biographies</h2>
</a>
</div>
</div>

Answer 2

ok here we go, you need to restructure your markup to follow bootstrap standards
CSS
.container {
background: yellow;
}
.thumbnail {
width: 200px;
display: inline-block;
}
HTML
<div class="container">
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
</div>
Here's a fiddle if you want to see it in action. I made the images responsive so make sure you stretch out the window far enough. On a smaller viewport the image will stretch to fit.