0

My project is using Bootstrap, and I have four lists of data need to be displayed responsive like:

111 222 333 444
111     333  
111

111 333
111 333
111 444
222

111
111
111
222
333
333
444

So I try to use bootstrap grid to do this. However they still have a gap between two columns. I think it is because bootstrap will sync the height of two columns which are wrapped in the same row.

Here is my jsfidde: https://jsfiddle.net/5zv0rcf8/

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="row">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-3">
        111 <br>
        111 <br>
        111 <br>
      </div>

      <div class="col-12 col-lg-6 col-xl-3">
        222<br />
      </div>
      <div class="col-12 col-lg-6 col-xl-3">
        333<br />
        333<br />
        333<br />
      </div>
      <div class="col-12 col-lg-6 col-xl-3">
        444<br />
      </div>
    </div>
  </div>


  <hr>

  <div class="row">
    <div class="col-12 col-xl-6 row">
      <div class="col-12 col-lg-6">

        111 <br>
        111 <br>
        111 <br>
        111 <br>
        111 <br>
        111 <br>
      </div>
      <div class="col-12 col-lg-6">
        222<br />

      </div>
    </div>

    <div class="col-12 col-xl-6 row">
      <div class="col-12 col-lg-6">
        333<br />
        333<br />
      </div>
      <div class="col-12 col-lg-6">
        444<br />
        444<br />
        444<br />
        444<br />
        444<br />
      </div>
    </div>
  </div>
Amit Tiwary
  • 787
  • 1
  • 8
  • 16
Pete
  • 170
  • 1
  • 13

3 Answers3

1

try removing gutters

<div class="row no-gutters">
</div>

Read docs here - https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Aldrin
  • 2,036
  • 15
  • 12
1

It sounds like you are referring to the vertical gap that appears between columns when they spill over to a second row. If so, this question has been asked before and has a great answer here: https://stackoverflow.com/a/22311212/170309

Since you are using Bootstrap, your best bet is probably to use the built-in functionality for Masonry cards like this (example from aforementioned answer): https://www.codeply.com/go/q03ZHDeSGN

sfarbota
  • 2,619
  • 1
  • 22
  • 30
1

if you want to remove gutters spacing so use no-gutters on row div and also you can use p-0 its padding 0px and you can use this class with row container and columns div its bootstrap predefined classes in bootstrap css sheet. and please follow the right structure of bootstrap here is the link below. https://getbootstrap.com/docs/4.0/layout/grid/

        <div class="row">
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column1
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column2
                <br/> Column2
                <br/> Column2
                <br/> Column2
                <br/>
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column3
                <br/> Column3
                <br/> Column3 Column3 Column3
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">

                Column4
            </div>
        </div>
    </div>
Rameez Bukhari
  • 486
  • 2
  • 6