Bootstrap location bar with different heights

Question

I want to add a bootstrap line with a class col-lg-3. my divcontains different heights. We hope to add articles with texts of various lengths. my conclusion , but the expected result is constructed here too. code as follows

<div class="row">
    <div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
    <div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
    <div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
    <div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>  

    <div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    <div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    <div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    <div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div> 
</div>

Updating values ​​entered as 1,2,3, etc., come from the mysql database. therefore, height is equal to line numbers of lines. PHP code `

    foreach ($value as $add) {
        echo "<div class='col-md-3'><p>";
        echo $add->item;
        echo "</p></div>";
    }
    ?>`

Answer 1

Maybe I messed up your source code. I change everywhere. Hope this helps you.

• :

<style> .col-md-3{padding:0px;} // default: 15px -> left and right. </style>

2. :

<div class="container"> <div class="col-md-12"> <div class="col-md-3"> <div class="col-md-12" style="background-color: #c5d5cb;height: 150px;"> 1 </div> <div class="clearfix"></div> <div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;"> 5 </div> </div> <div class="col-md-3"> <div class="col-md-12" style="background-color: #9fa8a3;height: 200px;"> 2 </div> <div class="clearfix"></div> <div class="col-md-12" style="background-color: #b56969;height: 70px;"> 6 </div> </div> <div class="col-md-3"> <div class="col-md-12" style="background-color: #e3e0cf;height: 50px;"> 3 </div> <div class="col-md-12" style="background-color: #daad86;height: 20px;"> 7 </div> </div> <div class="col-md-3"> <div class="col-md-12" style="background-color: #b3c2bf;height: 60px;"> 4 </div> <div class="col-md-12" style="background-color: #5a5c51;height: 35px;"> 8 </div> </div> </div> </div>

, , v3.1.1 clearfix... .

Answer 2

. . col-md-3 :

<div class="row">
<div class="col-md-3">
    <p>1</p>
    <p>5</p>
</div>
<div class="col-md-3">
   <p>2</p>
   <p>6</p>
</div>
<div class="col-md-3">
   <p>3</p>
   <p>7</p>
</div>
<div class="col-md-3">
   <p>4</p>
   <p>8</p>
</div>
</div>

Answer 3

,

<div class="row">
  <div class="col-lg-5">
   <div id="1"  ></div>
   <div id="5"  ></div>
  </div>
<div class="col-lg-5">
   <div id="2"  ></div>
   <div id="6"  ></div>
  </div>
<div class="col-lg-5">
   <div id="3"  ></div>
   <div id="7"  ></div>
  </div>
<div class="col-lg-5">
   <div id="4"  ></div>
   <div id="8"  ></div>
  </div>
</div>

, .

Answer 4

col-lg-3, . , .

HTML:

<div class="container">
  <div class="row">
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
      <div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
      <div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
      <div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
      <div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
    </div>
  </div>
</div>

CSS

.grid-row{
  margin-left: -15px;
  margin-right: -15px;
}
.left-block{
  float: left;
  width: 100%;
}

Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/

, .