0

I have been using Hugo to build up my website, however, I am having trouble making bootstrap cards of equal height even after using the h-100 class in the card div (as mentioned in a number of SO posts). I have copied my HTML code below.

I am guessing something in the css must be overriding the class.

Any advice would be appreciated.

 <section id="blog-posts">
<div class="container-fluid ">
  <div class="row text-center">
    <div class="col-lg-12">
      <h2 class="section-heading">Latest Blog Posts</h2>
      <div class="section-underline"></div>
    </div>
    {{- range ( where site.RegularPages "Section" "blog" | first 3 ) }}
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 mb-5">
          <div class="card h-100">
            <div class="card-img img-fluid">
              <!-- <div class="blog-cat-tag">Test</div> -->
              {{ if isset .Params "featured_image" }}<img class="blog-image" src="{{ index .Params "featured_image"}}" alt="...">{{end}}
            </div>
            <div class="card-body">
              <div class="project-title">{{ .Title }}</div>
              <p class='card-text'>{{ .Summary }}</p>
              <a href="{{ .Permalink }}">Read More</a>
              <!-- <a class="viewmore" href="">Read More</a> -->
              </div>
              <div class="index-blog-post-details">
                <div class="index-blog-post-icons">
                  <i class="far fa-calendar-alt"></i> {{- .Date.Format "January 2, 2006" -}}
                  <i class="far fa-clock"></i> {{ .ReadingTime }} min read
                  </div>
            </div>
          </div>
        </div>
        {{ end}}
      </div>
    </div>
  </div>
rockdoctor
  • 385
  • 1
  • 3
  • 11
  • Does this answer your question? [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Halden Collier May 18 '21 at 11:31
  • Thanks, but that does not seem to work. It results in all of my content disappearing. – rockdoctor May 18 '21 at 11:40
  • Please add `display: flex;` to your `.row`, remove the margins from `.card`, add `height: 100%;` to the `.card`'s and then add your margin to the columns instead of the cards. – Halden Collier May 18 '21 at 11:45

0 Answers0