Cannot center a row - html

I have 4 columns in a row and I cannot get the row centered. It's so weird...
If you look at the pic at the bottom, you can see the row is not centered by looking at the vertical border under the "most read" blue square.
html file:
<div class="block-section">
<div class="sm-section-wrapper">
<div class="row">
<div class="sm-preview-title">
MOST READ
</div>
</div>
<div class="row">
<div class="col-3">
<div class="sm-preview-wrapper">
<h3 class="preview-sm">
hello world
</h3>
<h2 class="preview-sm">
Vestibulum id ligula porta felis euismod semper.
</h2>
</div>
</div>
<div class="col-3">
<div class="sm-preview-wrapper">
<h3 class="preview-sm">
hello world
</h3>
<h2 class="preview-sm">
Vestibulum id ligula porta felis euismod semper.
</h2>
</div>
</div>
<div class="col-3">
<div class="sm-preview-wrapper">
<h3 class="preview-sm">
hello world
</h3>
<h2 class="preview-sm">
Vestibulum id ligula porta felis euismod semper.
</h2>
</div>
</div>
<div class="col-3">
<div class="sm-preview-wrapper">
<h3 class="preview-sm">
hello world
</h3>
<h2 class="preview-sm">
Vestibulum id ligula porta felis euismod semper.
</h2>
</div>
</div>
</div>
</div>
</div>
and here is my scss file:
.sm-preview-wrapper{
text-align: center;
border-right: 1px solid $light-gray;
padding: 0 35px;
}
.sm-section-wrapper{
#include clearfix();
.col-3{
margin: 0;
&:last-child{
.sm-preview-wrapper{
border-right: none;
}
}
}
padding-top: 50px;
padding-bottom: 36px;
.sm-preview-title{
padding-top: 6px;
text-align: center;
height: 30px;
width: 165px;
margin: 0 auto;
background: $blue;
font-family: $montserrat;
font-weight: bold;
color: white;
font-size: 14px;
}
}


Check out this fiddle: http://jsfiddle.net/9v98r58s/
You are using the border for .sm-preview-wrapper and not its parent .col-sm-3 which has a padding of 15px.
A solution is to use :after for the border
.sm-preview-wrapper:after{
position:absolute;
right:-15px;
width:1px;
top:0;
bottom:0;
content:'';
background:red;
}


I had to add a percentage margin to the first and last child to take up the entire width and center it.

Related

How do I align the bullet points. Im using bootstrap

This is one of the projects from free coding camp on the frontend certficate.
I'm trying to align the bullet points of the li elements as well as make a footer at the bottom of the page using bootstrap.
Codepen Link
Codepen html:
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="facts">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>
codepen css:`
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts {
text-align: center;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
} `

Using bootstrap 4 (per your codepen), you can add .d-flex.text-center.flex-column.align-items-center to .facts and remove text-align: center from your css. That will put the contents of .facts in a flex column, center align the children and center align the text. That will put the bullets beside each flex child.
Then to fix the footer to the bottom of the screen, add .navbar.fixed-bottom.justify-content-center; to the footer to fix it to the bottom of the screen and vertically align the contents. Then assign a height to it, and use that height value as padding-bottom on body to make room for the menu.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<style>
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
padding-bottom: 50px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
}
.footer {
color: #fff;
background: rgba(0,0,0,0.5);
height: 50px;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="d-flex text-center facts flex-column align-items-center">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar fixed-bottom justify-content-center">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>

How to place a text inside the top-left corner border of div

I've been going through lot of articles about placing a label/legend/text on the border of a div. I've a lot of div where I want to show the different labels exactly like the image shown below:
As I can see in the w3school they say to have a field set and get declare legend to display the texts, but its not working out for me. I have a set of jquery codes which appends the html with the labels :
$('.menu').hover(function () {
$(this).css('border', 'solid 2px #8080ff');
$(this).find('.divlabel').show();
}, function () {
$(this).css('border', 'none');
$(this).find('.divlabel').hide();
});
.divlabel {
float: left;
top: 5px;
right: 10px;
padding: 0px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="divlabel">Menu</div>
<ul class="mainmenu">
<li>...</li>
<li>...</li>
</ul>
</div>
<div>
Its not working as desired, please help out guys with this css.

You can use HTML5 data-* attribute to achieve this. It will save one div element:
body {
font: 14px/20px Arial, sans-serif;
}
.menu {
position: relative;
border: 3px solid #8fdaf9;
padding: 30px 10px;
}
.menu:before {
content: attr(data-title);
background: #8fdaf9;
position: absolute;
padding: 0 20px;
color: #fff;
left: 0;
top: 0;
}
.menu ul {
margin: 0;
}
<div class="menu" data-title="Menu">
<ul class="mainmenu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div>

Below example can help you get started. A CSS only solution
div.wrapper {
position: relative;
border: 2px solid cornflowerblue;
margin-top: 20px;
padding: 20px 10px 10px;
}
div.wrapper label {
color: white;
line-height: 20px;
padding: 0 5px;
position: absolute;
background-color: cornflowerblue;
/* Adjust these values to posiytion the title or label */
top: -10px;
left: 10px;
}
<div class="wrapper">
<label>Menu 1</label>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna
</div>
</div>
<div class="wrapper">
<label>Menu 2</label>
<div>
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</div>
</div>
<div class="wrapper">
<label>Menu 3</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 4</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 5</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 6</label>
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</div>

Equal height for bootstrap columns not working

I'm looking at the solution here on SO to set all columns in a bootstrap row to equal heights. It works fine in my fiddle, but in my browser with all other css the '.thumbnail.row.equalColumnHeight' css is not being used. There are black lines through it. I'm kinda a newbie to css, is there a way to override these black lines and get it to use the css for this class?
Here is what it looks like in Chrome dev tools.
here is the row in the browser - not equal heights.
Here is the code in fiddle where it shows unequal heights.
Here is the code.
html,
body,
.container-fluid,
.row {
height: 100%;
}
.row > div {
height: 100%;
}
.row .col-md-5 {
background-color: #eee;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
.row .col-md-7 {
background-color: #ddd;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
#googleResultMap {
width: 100%;
height: 100%;
/*border: 1px solid black;*/
}
.searchFilter {
/*width:200px;*/
height: 15%;
/*border: 1px solid blue;*/
}
.searchResults {
height: 85%;
border: 1px solid green;
overflow-y: scroll
}
input[readonly].default-cursor {
cursor: default;
background-color: white;
}
.date-field {
width: 120px;
}
##media only screen and (max-width:768px) {
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
}
.thumbnail .col-lg-3 {
border: 1px solid red;
}
.searchResults {
height: 85%;
border: 1px solid green;
overflow-y: scroll
}
.thumbnail.row {
height: auto;
}
.cborder {
border: 1px solid pink;
}
.imageColumn {
padding-right: 0;
padding-left: 0;
}
.thumbnail.row.equalColumnHeight {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs">
#*Sidebar*#
<div id="googleResultMap"></div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
#*Body content*#
<div class="searchFilter col-lg-12 col-md-12 col-sm-12 hidden-xs">
#Html.TextBoxFor(model => model.ClassDate, "{0:MM/dd/yyyy}", new { #class = "date-field form-control default-cursor", #readonly = "readonly" }) #Html.Hidden("classTime")
<br/>Time Filter
<br/>Open Classes Only
</div>
#*
<div class="searchResults col-lg-12 col-xs-12 col-sm-12">*#
<div class="searchResults col-lg-12 col-xs-12 col-sm-12">
<div class="thumbnail row equalColumnHeight">
<div class="col-lg-3 col-xs-3 imageColumn">
#*
<h3>Thumbnail label</h3>
<p>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link
</a>Test Data
</p>*#
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
</div>
<div class="col-lg-3 col-xs-3" style="text-align: center;">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
<i class="fa fa-users fa-5x" style="margin: auto;"></i>
</div>
<div class="col-lg-3 col-xs-3" style="text-align: center;">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
<i class="fa fa-user fa-5x" style="margin: auto;"></i>
</div>
<div class="col-lg-3 col-xs-3">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
</div>
<div class="collapse cborder" id="collapseExample">
<div class="well">
test data
<br />test data
<br />test data
<br />
</div>
</div>
</div>
</div>
#*</div>*#
</div>
</div>
</div>

To do same height columns in Bootstrap you need follow this answer. Simply add this code to your CSS:
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}

Expand height of an element on smaller screens

https://jsfiddle.net/7v0dyfo3/
This is (not exactly, without styling) what i'm trying to do for a listing.
It's all good but it does not resize properly.
I would like the div episode-box to expand its height for smartphone screens, so the text can be shown vertically, below the image.
It's not very correctly coded, but can you tell me what are my mistakes for the bad resizing ?
<article class="full-width">
<div class="post-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="guide-art-container">
<div class="episode-content">
<div class="saga">
<div class="row">
<div class="col-md-12">
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
</div>
<span class="episode-nb"> <p>001</p></span>
<div class="episode-single- content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single- desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p> <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
</div>
<span class="episode-nb"><p>001</p></span>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p> <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--.post-box-->
</article>

You need to use media queries
Something like this: (Minimize your browser to see the effect)
.full-width {
margin: 0 0 30px;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 1200px)
.col-md-12 {
width: 100%;
}
.guide-art-container {
padding: 25px;
}
.saga-title {
margin-top: 15px;
}
.episode-box {
width: auto;
background-color: #F9F9F9;
margin-top: 7px;
box-shadow: inset 0px 100px 150px -150px rgba(204,204,204,1);
height: 150px;
border: 1px solid #E8E8E8;
position: relative;
}
.episode-img {
float: left;
}
.episode-box img {
float: left;
margin-right: 10px;
padding: 5px;
}
span.episode-nb {
position: absolute;
bottom: 2px;
left: 5px;
background-color: #FC8A19;
max-width: 100px;
width: 100%;
opacity: 0.8;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 15pt;
}
.episode-single-content {
padding: 10px 10px 10px 0px;
max-height: 150px;
}
.episode-single-desc {
max-height: 150px;
font-size: 9pt;
padding-right: 4px;
padding-left: 5px;
padding-top: 5px;
}
span.cast {
font-size: 7.4pt !important;
font-family: 'Roboto', Arial, Tahoma, Sans-serif;
line-height: 19px;
}
.thumbnail-ep {
float: left;
margin-right: 10px;
position: relative;
max-width: 260px;
width: 100%;
padding: 2px;
}
span.episode-nb {
position: absolute;
bottom: 2px;
left: 5px;
background-color: #FC8A19;
max-width: 100px;
width: 100%;
opacity: 0.8;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 15pt;
}
.episode-single-title h5 {
margin-top: 2px !important;
}
#media only screen and (max-width : 480px) {
.episode-img {
float:none;
position:relative;
}
.episode-box img {
float:none;
}
.thumbnail-ep {
float:none;
}
.episode-box {
height:auto;
}
}
<article class="full-width">
<div class="post-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="guide-art-container">
<div class="episode-content">
<div class="saga">
<div class="row">
<div class="col-md-12">
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
<span class="episode-nb"><p>001</p></span>
</div>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
<span class="episode-nb"><p>001</p></span>
</div>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--.post-box-->
</article>
JS Fiddle

You need media query.
Suppose we have .high-height-in-xs-device
#media screen and (max-width:767px) {
.high-height-in-xs-device {
height: 800px;
}
}
The above CSS will only work in screen with width narrower than 767px, which is a bootstrap standard for xs screen widths.

Center then left align image grid in Bootstrap fluid width

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/

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>

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.