Question posted in 
Now that I’ve finally gotten all of the elements in place and the forms done in these Twitter-Bootstrap thumbnails in the grid layout (I need to re-create a mock-up) they aren’t stacking side by side when I make the screen larger (I need them to stack evenly side-by-side when the screen’s larger & evenly on top of each other when it’s smaller). Before I added all of these elements in place, they were doing it & I can’t figure out why they aren’t now, I’ve gone over my code again and again.
Also, the layout on each thumbnail seems to look a bit different (I’d like them to look like the very last thumbnail with the Kiwis on it) even though I’ve gone over my code again and again, and can’t find the difference & they’re using the same CSS for the elements.
[I guess if I can’t find out why they look differently, I need to find a way to get more space around the bottom button, how to make the caption section (where the form & button is) to appear further down the page and to get rid of the white border around the thumbnail- I’ve tried changing so many elements in the CSS and cannot find a way to manipulate this.]here’s the code:
HTML:
<body>
<header></header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<p class="above lead">Assorted Vegetables (1lb)</p>
<div class="thumbnail">
<img class="card-img-top img-responsive" img src="http://i.imgur.com/uDhJgqo.jpg" alt="peppers">
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend class="text-muted">$1.00</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-4">
<p class="above lead">Assorted Vegetables (1lb)</p>
<div class="thumbnail">
<img class="card-img-top img-responsive" img src="http://i.imgur.com/mv2lo0S.jpg" alt="raspberry">
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (2.50))">
<legend class="text-muted">$2.50</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-4">
<p class="above lead">Assorted Vegetables (1lb)</p>
<div class="thumbnail">
<img class="card-img-top img-responsive" img src="http://i.imgur.com/fd6Ybmb.jpg" alt="kiwi">
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (.3))">
<legend class="text-muted">$.30</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
</main>
</body>
CSS:
body { background: #3ca7c4; /* Old browsers */
//background: -moz-linear-gradient(top, #3ca7c4 12%, #54b5d0 45%, #32879e 100%); /* FF3.6-15 */
background-image: -webkit-linear-gradient(top, #3ca7c4 12%,#54b5d0 45%,#32879e 100%); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to bottom, #3ca7c4 12%,#54b5d0 45%,#32879e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ca7c4', endColorstr='#32879e',GradientType=0 ); /* IE6-9 */
}
header { padding-top: 80px; }
.thumbnails > li { border:0; }
.thumbnail {
border: 0 none;
box-shadow: none;
}
legend { float: left;
margin-top: 25px;
padding-top: 15px;
margin-bottom: 5px;
}
.caption { background-color: #f1f1f1;
border: none;
}
.above { text-align: left;
color:#ffffff;
}
form > * { line-height: 2em;
border: none;
background-color: #f1f1f1;
}
.inline { display: inline;
color: #3c763d;
}
.quant { text-align: right;
max-width: 40em;
float: right;
}
2
Answers
Your
<div class="row">is terminating too soon. The closing div is right above “Assorted Vegetables.” You need to encapsulate all of your divs on the same row to achieve the affect you want.Simply move that div to the very bottom of your before your closing
</main>tag.Before:
</div><div class="col-sm-4">
<p class="above lead">Assorted Vegetables (1lb)</p>
After:
Your structure is off; you have extra closing div tags at the ends of your 1st and 2nd column instead of closing your container-fluid and row. And as far as the consistency of the thumbnails, your last one (with the Kiwi) has the caption class closed after the button, the other 2 are before.
See example Snippet at FullPage.