Lining up elements next to each other - html

What is the best way of ensuring that the elements on left perfectly line up with the box on the right (on a desktop)? Right now there seems to be a gap at the bottom. Can't seem to figure it out...
jsfiddle here: https://jsfiddle.net/kqf6vubr/1/
<div class="row" style="margin-bottom: 5em;">
<div class="col-sm-5 col-md-5" style="height: 300px">
<div class="row">
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-sm-7 col-md-7 panel-body" style="background-color: #ccc; padding: 2em">
<h3 style="margin-top: 0px; margin-bottom: 1em">Brand Name</h3>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="fluid-media">
<iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="col-sm-6 col-md-6">
Description text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie libero quis hendrerit blandit.
</div>
</div>
<div class="row" style="margin-top: 1em; margin-left: 1px">
{ Watch Time } | { Views } | { Rating }
</div>
</div>
</div>

Related

Opening Bootstrap Accordion content under parent div

I am trying to open each div under their respective parent div, but my code opens up each div under the first image, where no one can see. I feel i am using position wrong?
.collapse {
position: relative;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="container">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</section>

just put the collapsable divs inside the col-md-4 divs
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
</div>
</section>

Bootstrap 3 - how to create responsive fixed right menu, with scroll

In the next image you can see what I want to achieve:
Desktop
Mobile
How can I do this?
I've been trying something like this:
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-10" style="overflow:auto;">
<h1>Profile</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ligula tincidunt eros eleifend porttitor. Maecenas cursus volutpat erat.
</p>
</div>
<!--feeds-->
<div class="col-md-2">
<h3>-- Feeds --</h3>
</div>
</div>
</div>
<!--fixed menu-->
<div class="col-md-2" style="background-color:#2ecc71;padding:3px;">
<div class="text-center">
<img src="/img/1.png" class="img-circle" style="max-width:150px">
<h3>hi!</h3>
</div>
<div>
<!-- menu links -->
</div>
</div>
</div>
Thanks in advance.

I believe this is what you're trying to do. You could use the default Bootstrap navbar by changing it's position rules (position: fixed;) to suit your needs while inside of a media query so once you're below 768px your nav adjusts to the default toggle nav. See Navbar for reference.
Working Example: Open at full page and reduce the viewport.
html,
body {
height: 100%;
}
#media (max-width: 767px) {
body {
padding-top: 50px;
}
}
#media (min-width: 768px) {
.navbar.sidebar-nav {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: auto;
height: 100%;
width: 200px;
background: #222;
overflow-y: auto;
}
.navbar.sidebar-nav .navbar-header {
width: 100%;
}
.navbar.sidebar-nav .navbar-header .navbar-brand {
float: right;
}
.navbar.sidebar-nav .navbar-nav {
width: 100%;
height: 100%;
text-align: right;
}
.navbar.sidebar-nav .navbar-nav > li {
float: none;
display: block;
}
.main-content {
margin-right: 200px;
}
}
/*THUMBNAIL FOR DEMO ONLY*/
.thumbnail {
border: none;
border-radius: 0px;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
padding: 25px;
max-width: 500px;
margin: 12.5px auto;
}
/*THUMBNAIL FOR DEMO ONLY*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse" type="button" class="navbar-toggle collapsed" data-target="#bs-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar Brand</a>
</div>
<div class="navbar-collapse collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</div>
</div>
</nav>
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

How to add some space between in col-md-4?

In my school project. I am trying to create a photo gallery like view but I need that between two photos some space comes the code is here
<div class="container">
<h2 style="text-align: center;">Physics</h2>
<br>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/GirishJain2.JPG" alt="Girish Jain">
<p style="text-align:justify;">
<b> Girish Jain</b> <br>
b.Tech,IIT-Delhi<br></br>
Exp 14 years
</p>
</div>
<div class="col-sm-6"></div>
<div class="col-md-2" style="background-color: lavender;">
<img class="img-responsive" src="assets/prateek.JPG" alt="Prateek Jain">
<p style="text-align:justify;">
<b> Prateek Jain</b> <br>
b.Tech-MNIT,Jaipu<br></br>
Exp 7 years
</p>
</div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/sidharthjain.JPG" alt="Siddharth Jain">
<p style="text-align:justify;">
<b> Sidharth Jain</b> <br>
b.Tech-MNIT,Jaipur<br></br>
Exp 14 years
</p>
</div>
</div>
</div>
and the pages like
below the physics section I want a some space between each photo

Allow the col-md-4 to continue to serve it's current purpose. You want the image to be inside of a div who's job will be to give space.
HTML
<div class="col-md-4 col-xs-4 col-sm-4">
<div class="image-padding">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>
CSS
.image-padding {
padding: 5px;
}
.image-padding img {
width: 100%;
}
CodePen
http://codepen.io/Goosecode/pen/oxaEjR

use the below it will work fine with you wrap it inside your container div
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
</div>
<hr>
<!--for other images !-->
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>

This can be easily achieved using Bootstrap.
HTML
<div class="col-md-4" id="element">
Your Content.
</div>
CSS
#element {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

Column alignment in Bootstrap

I need three images to be placed in the first row and two images in second row as shown in the below figure.
My code for the above image is as follows,
<div class="row" style="margin-left:15%">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Post Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a PhD Guy</p>
</div>
</div>
<br>
<div class="row" style="margin-left:20%">
<div class="col-xs-6 col-md-3" style="margin-left:20%">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Course taking one</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">Others</p>
</div>
</div>
But when I view it in mobile mode using chrome inspect element it is displayed as below
I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.
How can I get them aligned.

Maybe try this:
https://jsfiddle.net/68kycb4g/
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
<div class="col-xs-6 col-sm-5"></div>
</div>

Bootstrap 3: How to keep thumbnails or images aligned within a row?

I'm trying to make this grid work but I'm not sure what's the best approach here. I have this page with several thumbnails and each thumbnail has a title. The problem is that when the title length is very long it pushes the thumbnail and everything get messy like this:
I would like to find a way to keep thumbnails aligned, so if there is a very long title instead of pushing that thumbnail down, it pushes the whole row.
This is the markup I have so far for this block of thumbnails:
<div class="container">
<div class="content row">
<div class="col-lg-12">
<h1>Fresh Goals and More</h1>
<hr>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
</div><!-- content row close -->
</div><!-- container close -->
Any hint on how can I fix this? Thanks in advance.

this is simple you have to have a row for four thumbs
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
the row will keep the height of the longest column with children thumb
http://www.bootply.com/6C7i5iRZhz