There is a blank colomn in my photo gallery - html

I am kinda new and still learning, but today I downloaded a template to get myself started and when I changed the images there is suddenly a blank column: https://gyazo.com/a62f5e3de25876c9262d9894cc7d39f3 <--- see picture.
I have tried changing the columns around as well as changing the md-4 to like md-3.
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/Schorisse 201204-11.jpg" alt="oops"">
<div class="overlay"></div>
<div class="work-content">
<span>De kinderen</span>
<h3>(Lekker) samen op de trampoline</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/Schorisse 201204-11.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/3Z2A3280 (1).jpg" alt="oops">
<div class="overlay"></div>
<div class="work-content">
<span>Trouwfeest</span>
<h3>Piet</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/3Z2A3280 (1).jpg" alt="oops"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/059.jpg" alt="oops">
<div class="overlay"></div>
<div class="work-content">
<span>Gezinfototjes</span>
<h3>En wat zien ze er gelukkig uit!</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/IMG-20170408-WA0012.jpg" alt="oops"> ><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/021.jpg" alt="oops">
<div class="overlay"></div>
<div class="work-content">
<span>Trippy en Bomma</span>
<h3>Beetje gek doen!</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/021.jpg" alt="oops"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/IMG_4028.JPG" alt="oops">
<div class="overlay"></div>
<div class="work-content">
<span>De bomma en bompa</span>
<h3>Ruik ik daar bier?!</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/IMG_4028.JPG" alt="oops"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="img/IMG-20160220-WA0004.jpg" alt="oops">
<div class="overlay"></div>
<div class="work-content">
<span>Gezinfototjes</span>
<h3>En wat zien ze er gelukkig uit!!</h3>
<div class="work-link">
<i class="fa fa-external-link"></i>
<a class="lightbox" href="img/IMG-20160220-WA0004.jpg" alt="oops"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
I expect the problem is between image 3 and 4 but I am not sure.


A solution is to use flexbox with the option flex-wrap: wrap, but that may break your Bootstrap grid (looks like Bootstrap).
Another solution would be to use a JavaScript plugin like Masonry (https://masonry.desandro.com/), this will calculate the position of each photo and create a nice grid.


You should not have columns outside of rows in bootstrap:
every
<div class="col-*">
should always be wrapped by a <div class="row">
like:
<div class="row">
<div class="col-*"></div>
<div class="col-*"></div>
</div

Related

How to center 2-columns in a Bootstrap Grid

I'm trying to center two columns in a row in Bootstrap and no matter what offset or centering, they won't stay on same line in center of full-width column on md size or above
Tried col-md-6 offset and adding row-center and column-center classes, nothing has worked
Here's the full footer code - I want the email and tel to be on one line on larger screens and the two social icons alongside each other on the next row. It wraps nicely to display on mobile, just the larger screens I need some help with.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5></a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
</div>
</div>
<div class="row row-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</footer>

Add the 'text-center' class to your rows.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row text-center">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row text-center">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5>
</a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
<h5>905-749-5700</h5>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>

According to docs try this way:
<div class="row justify-content-center">
<div class="col-*"></div>
<div class="col-*"></div>
</div>

center horizontally 2 elements in a row using bootstrap or css

Im using a bootstrap template and I need to center two element in the team section.
The elements are inside a div class="col-md-3 col-sm-3 col-xs-12" and this one is inside a div class="team-top" and this one is inside a div class="row". I'm still kinda newbie with bootstrap so I find difficult to find which classes I have to modify.
Each element has an image and text describing each one of the team members.
actual situation
here's the code.
<div id="team" class="our-team-area area-padding">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="section-headline text-center">
<h2>Nuestro Equipo</h2>
</div>
</div>
</div>
<div class="row">
<div class="team-top">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/1.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Daniel Cárdenas</h4>
<p>Músico, Ingeniero en y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/2.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Ignacio Weisser</h4>
<p>Músico, Ingeniero en Sonido y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
</div>
</div>
</div>
</div>
<!-- End Team Area -->
I've tried
.team-top{
text-align:center;
margin: 0 auto;
display: block;
}
.team-top{
left: 0;
right: 0;
margin: 0 auto;
}
.team-top{
margin-right: auto;
margin-left: auto;
}
and adding classes to div class="row" and div class="col-md-3 col-sm-3 col-xs-12" and div class="single-team-member" but I still believe I have to add CSS to div class="team-top"
Any help would be appreciated

To position or reorder columns in a bootstrap row, you can use Push, Pull or Offset (bootstrap doc).
Offset adds a left margin to a column.
<div class="row">
<div class="col-md-3 col-sm-3 col-sm-offset-3 col-xs-12"></div>
<div class="col-md-3 col-sm-3 col-xs-12"></div>
</div>

Adding a View All button to a website section and styling it

I am learning to create a website by downloading and editing contents.
I have created a section in the home page which shows the images of all stores of a shop. I need to display 3 stores image on the home page and add a View all button in the right bottom side of the section.
I have tried many ways but can't get it done in a good way.
Below is the HTML Code :
<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Stores</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#storeModal1" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store01.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 01</h4>
<p class="text-muted">Location 01</p>
</div>
</div>
<div class="col-md-4 col-sm-6 store-item">
<a href="#storeModal2" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store02.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 02</h4>
<p class="text-muted">Location 02</p>
</div>
</div>
</div>
</div>
</section>

Why not just adding a new row, text aligned to right with the button ?
edit: See other response, this one only tell how to add the HTML button, not the javascript of it.
<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Stores</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#storeModal1" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store01.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 01</h4>
<p class="text-muted">Location 01</p>
</div>
</div>
<div class="col-md-4 col-sm-6 store-item">
<a href="#storeModal2" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store02.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 02</h4>
<p class="text-muted">Location 02</p>
</div>
</div>
</div>
<!-- HERE -->
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-primary">View All</button>
</div>
</div>
</div>
</section>

If you don't want to load them asynchronously (resp. you have them in HTML file already) you can wrap them into div, which is set as a hidden in css display:none
Then you need Javascript and create event which handles DOM interaction on click.
I made a little sample for you with CSS and jQuery (Javascript Framework):
https://jsfiddle.net/ta53jfwo/
I hope it helps!

Code is messing up second row using col in bootstrap

Will someone please tell me what I am doing wrong in this code? I have a contacts page that uses the same code and just loops with a query. But for some reason the second row has a huge gap as if theres something blocking it.
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here --><cfoutput query="grab_contacts">
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
<div class="col-sm-8">
<h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
<h5>
<strong>#grab_contacts.position#</strong><br><br>
<i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
MCTC #grab_contacts.branch# Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here --></cfoutput>
</div>
</div>
Rendered HTML
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4854</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4814</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4856</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>David Brierton</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>Associate III</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>Associate I</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4886</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Operations Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">
<div class="m-t-xs font-bold">Extension 4866</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>QA Support Analyst</strong><br><br>
<i class="fa fa-map-marker"></i> QA Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Desoto Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
</div>
</div>

The problem is with this section:
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
You need to wrap new column sets in rows. You have your boxes in a row wrapper, but the content of the boxes is missing the row wrapper for your columns, so as you loop, Bootstrap is not going to apply the correct layout/positioning styles to the columns inside the boxes. Basically, just wrap your nested columns for the box content in a row class.

You should really only have 3 'col-lg-4' inside the .row div which adds up to 12. Include the <div class="row"></div> in your loop. See snippet added (changed the col-lg-4 to col-xs-4 for effect)
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=266">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/amraoui_al.jpg">
<div class="m-t-xs font-bold">Extension 4854</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Ali Amraoui</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=305">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/adams_br.jpg">
<div class="m-t-xs font-bold">Extension 4814</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Brianna Adams</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=192">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/brierton_da.jpg">
<div class="m-t-xs font-bold">Extension 4856</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>David Brierton</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
<div class="row">
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=166">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/alicky_he.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Heather Alicky</strong></h4>
<h5>
<strong>Associate III</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=286">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/ackles_je.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Jennifer Ackles</strong></h4>
<h5>
<strong>Associate I</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=110">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/alfonso_ki.jpg">
<div class="m-t-xs font-bold">Extension 4886</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Kim Alfonso</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Operations Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
<div class="row">
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=61">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/brammer_sa.jpg">
<div class="m-t-xs font-bold">Extension 4866</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Sara Brammer</strong></h4>
<h5>
<strong>QA Support Analyst</strong><br><br>
<i class="fa fa-map-marker"></i> QA Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=223">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/albritton_sh.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Shannon Albritton</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Desoto Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
</div>
</div>
You should review the bootstrap css page to ensure you have the right html structure when building your grids.

Boostrap grid not aligning due to different image sizes

I am using Bootstrap to present my projects.
I am trying to have 3 images in each row. However, the problem is all images have all slightly different sizes.
This has caused my images to skip some (so some rows will only have 1 image).
Here is an example
http://bosung.info/#portfolio
What I want is like 2d grid where exactly 3 images in each row without skipping any spots. I don't want to stretch any images so it would be just empty spaces to make all the images same height/width ratio.
I also want to make sure this works even when the screen is smaller (I don't want to make image height absolute)
CSS I have used:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#bubble-fighter" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/bubble-fighter.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#doomsday-shopping" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/doomsday-shopping.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#magic101" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/magic101_3.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#travel-smart" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/travel-smart.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#union-of-swords" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/union-of-swords.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#bear-boat-adventure" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/bear-boat-adventure9.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#translink-me" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/translink-me.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#transit-alarm" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/transit-alarm.png" class="img-responsive" alt="">
</a>
</div>
</div>

Adding clear both on (1, 4, 7 & 10 ...)
#portfolio .portfolio-item:nth-child(3n+1) {
clear: both;
}