Twitter Bootstrap Question posted in

Twitter Bootstrap column height change without gaps in the column grid?

How can I make bootstrap 4.5 one column height change bigger so that there would be no gaps in the grid? See the picture below (test 2 and test 4 columns should be with no gap and ONLY test 1 should be higher, other the same height).

Start position is that all the columns are equal height. I might use jquery to expand the "test 1" column.

Relevant code here:

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                
                <div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
                    test 1
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 2
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 3
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 4
                </div>
                
            </div>
        </div>
    </div>
</div>

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I can get it working with two flex columns but then the order does not work in phone layout (it will be 1,3,...). See the images:

    enter image description here

    enter image description here

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div style="col-lg-6 d-flex flex-column">
            <div class="" style="height: 400px; width: 300px; background: #eee; border: 1px solid #333;">
                test 1
            </div>
            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 3
            </div>
        </div>
        <div style="col-lg-6 d-flex flex-column">

            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 2
            </div>
            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 4 sigh
            </div>

        </div>
    </div>
</div>


  2. 0

    You could just use min-height: 200px; instead of just setting the height.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                
                <div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
                    test 1
                </div>
                <div class="col-lg-6" style="min-height: 200px; background: #eee; border: 1px solid #333;">
                    test 2
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 3
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 4
                </div>
                
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    And actually this is possible by making my own float columns. They seem to work without gaps (float left always fills the space correctly).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search