0

I have a problem with Bootstrap 3 columns. When the 12 columns are filled and I keep adding columns they are stacking under them(normal behavior). But if the columns on top of them have different height, a gutter is created. Is there a way of removing it so they can align properly(with no space)? (desktop)

<div class="row content clearfix">
    <div class="col-md-4 itms">
        <div class="user">
            <a href="#" class="thumbnail-custom">
                <img src="logo.jpg" alt="User">
            </a>
            <p>Posted by:</p>
            <p>User</p>
        </div>
    </div>
</div>

And the CSS:

.col-md-4{
margin: 0;
padding: 0;
min-height: 100px;
        }

.itms {
border: 2px solid rgba(54, 21, 21, 1);
}
.user{
padding: 5px 0 0 5px;
max-width: 80px;
border-right: 2px solid rgba(54, 21, 21, 1);
}

.user img{
 margin-top: 5px;
 max-width: 77px;
 max-height: 77px;
 margin: -5px 0 0 -5px;
 border-bottom: 2px solid rgba(54, 21, 21, 1);
 }
llanato
  • 2,508
  • 6
  • 37
  • 59
Ivan Ivanov
  • 11
  • 3

1 Answers1

1

You either have the columns with rows separating them so they don't shift under each other, or (as I do) use flex. You can also do other things if you have to support IE8 for equal height columns. Equal height is the only way I know to make them not shift like your issues are indicating. (How can I make Bootstrap columns all the same height?).

Here's a simple Bootply to show you how this can be done: http://bootply.com/127827

Create a custom class to append to row with these values:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
Community
  • 1
  • 1
Aibrean
  • 6,297
  • 1
  • 22
  • 38
  • No, I'm not using a different row for each column(all the columns are in the same row), and the columns are shifting under each other and I don't want all the columns to be one exact height :/, thank you for your time :). – Ivan Ivanov Jan 23 '15 at 15:59
  • Another option is to do a 3 column and populate inside. – Aibrean Jan 23 '15 at 16:13
  • Great idea, and do the queries for the mobile!! – Ivan Ivanov Jan 23 '15 at 17:01