Bootstrap set column height and spacing

Question

I'm wanting to populate the blocks dynamically. In reality, there would be a for loop to send the data through. However, I'm having some issues with its height at different screen sizes using bootstrap 4. I would like the columns to have the same height with each other (take the longest height within the max-height limit) when resizing as the text is pushing to extra lines on smaller window size. Issue:

Ideal result: Any tips would be greatly appreciated!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!--BLOCK-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!--BLOCK ends-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

@cale_b the columns are already equal height and the issue is the content inside (this is also said in the duplicate link you added) — Temani Afif, Dec 06 '18 at 23:41

score 2 · Accepted Answer · answered Dec 06 '18 at 23:38

You are almost good as the column are already equal height but the content inside is not filling all the spaces. You can adjust the code like below

Note the use of the classes h-100 (height:100%) flex-fill (flex:1 1 auto) and mt-auto (margin-top:auto)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!--BLOCK-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!--BLOCK ends-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

Why keep answering duplicated answers? it is only for rep farm right??? you should read this:https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled `Should I answer it? No, not if you think it's a duplicate. ` — dippas, Dec 08 '18 at 19:03
@dippas please read well the duplicate question and check the code of the OP, the duplicate is not relevant at all because the column are already equal height. — Temani Afif, Dec 08 '18 at 22:11
@dippas another one you wrongly closed: https://stackoverflow.com/questions/53682577/how-to-make-any-hovered-color-darker-lighter-that-the-original/53683324#53683324 .. check the question, it's not about chaning alpha and opacity, it's about making a solid color darker or lighter, there is nothing to do with opacity at all. — Temani Afif, Dec 08 '18 at 22:32
1st one, if not entirely duplicate, you know for sure this type of questions are asked a lot in here, a quick google search now (2min) gave me another(100% correct) dupe, so ya stop the gaming and close these one — dippas, Dec 08 '18 at 22:40
2nd one why `opacity` isnt an option to make a solid color darker or not? is a duplicate. The duplicate question doesn't have to be 100% copy the question, but somehow the issue has to be identical and specially the answer/solution to the duped question has to solve it — dippas, Dec 08 '18 at 22:42
@dippas Either the given links as duplicate solutions gave the solution that Temani offered which is also very up to date that only work with the very recent bootstrap version (4.1.0+) and if I tried to use those solutions, it wouldn't work properly with other design points that I didn't mention here as it wasn't needed. — Victoria Le, Dec 10 '18 at 16:03

score 1 · Answer 2 · answered Dec 06 '18 at 23:50

1

just add the class mt-auto to your buttons and that will solve your problem since your columns have same height

<div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>

answered Dec 06 '18 at 23:50

Abdelillah Aissani

3,058
2
10
25

score 0 · Answer 3 · answered Dec 06 '18 at 23:59

I had the same issue, I solved it with a little script

U have to use it on a container with the information

How it works 1. gets all the height divs of a chosen container class 2. Gets which height is the heighest 3. Applys to all the containers with the same class the same height for all.

<script>
        var elementHeights = $('.desctext').map(function() {
        return $(this).height();
        }).get();

        var maxHeight = Math.max.apply(null, elementHeights);

        $('.desctext').height(maxHeight);
      </script>

Hope this works for ya

Bootstrap set column height and spacing

3 Answers3