When using Bootstrap "row" and "col-lg-3" classes, all the columns get height of longest column. How to fix this?

Question

I'm developing a simple layout using Bootstrap. It loads some data to columns using "row" and "col-lg-3" class. There are 4 columns in the view under "row" class. In the "col-lg-3" class, i added another "row" class and divided it into 2 columns of "col-lg-6". Please check the code here. Then it is easy to understand.

<div class="row">
    <div class="col-lg-3"
         style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
        <div class="row">
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
                     class="img"
                     alt="image">
            </div>
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                     class="img"
                     alt="image">
            </div>
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                     class="img"
                     alt="image">
            </div>
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                     class="img"
                     alt="image">
            </div>
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                     class="img"
                     alt="image">
            </div>
        </div>
    </div>
    <div class="col-lg-3"
         style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
        <div class="row">
            <div class="col-lg-6">
                <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
                     class="img"
                     alt="image">
            </div>
        </div>
    </div>
</div>

This is a sample snippet from my original code. I only added 2 columns to show you. And please check the output here.

You can see the output. First column has 5 items and it's loaded in 3 rows. Second column has one item. But the issue is the background color. In second column, I only need "gray" color to the item row. Not to other 2 rows there. It has bottom empty space. How to reduce that ? Every time all the columns take the height of the longest column. I need to make these columns independent. Please help me on this. Thanks.

satyajit rout satyajit rout · Accepted Answer · 2018-01-03T06:34:17

try add background-color: #cecece to .col-lg-6

.col-lg-6 {
  background-color: #cecece;
}

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="col-lg-12" style="border-radius: 10px;overflow: hidden;margin-right: 5px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
                                 class="img"
                                 alt="image">
                        </div>
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                                 class="img"
                                 alt="image">
                        </div>
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                                 class="img"
                                 alt="image">
                        </div>
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                                 class="img"
                                 alt="image">
                        </div>
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
                                 class="img"
                                 alt="image">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="col-lg-12" style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
                                 class="img"
                                 alt="image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

When using Bootstrap "row" and "col-lg-3" classes, all the columns get height of longest column. How to fix this?

3 Answers