Hector de Prada Hector de Prada - 5 months ago 15
CSS Question

Bootstrap Columns not aligning properly.

I have this code to create a 4 column layout in Bootstrap 3. They display perfectly in desktops and mobile devices. However, in tablets, the third column goes to the left and the fourth column goes into a third row. There is a white space in the second column on the left where the third column should actually be in order to create the 2 col-sm-6 layout.

<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 noticia">
<img src="img/1.jpg" alt="" >
<p class="fecha">17 de Abril de 2016</p>
<h2>Title</h2>
<p>Some text</p>
<a href="#" class="btn btn-default">Leer Más...</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 noticia">
<img src="img/3.jpg" alt="" >
<p class="fecha">17 de Abril de 2016</p>
<h2>Title</h2>
<p>Some text.</p>
<a href="#" class="btn btn-default">Leer Más...</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 noticia">
<img src="img/2.jpg" alt="" >
<p class="fecha">17 de Abril de 2016</p>
<h2>Title</h2>
<p>Some text.</p>
<a href="#" class="btn btn-default">Leer Más...</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 noticia">
<img src="img/2.jpg" alt="" >
<p class="fecha">17 de Abril de 2016</p>
<h2>Title</h2>
<p>Some text.</p>
<a href="#" class="btn btn-default">Leer Más...</a>
</div>
</div>
</div>


The only style I have for this div are the following:

.noticia{
padding:10px;
max-width:100%;


}

.noticia img{
max-width:100%;
margin-bottom:20px;
}
.noticia h2{
font-size:20px;
font-family: 'Ubuntu', sans-serif;
font-weight:medium;
margin-top:0px;
margin-bottom:15px;
}


This is a screenshot of what I am saying. Any help would be amazing. I have spent almost an hour looking into this and it is probably something I am doing wrong, but I am just starting with Bootstrap.

enter image description here

Answer

Try put this code after your second .noticia div

<div class="clearfix hidden-md hidden-lg"></div>