OT: Making Bootstrap Card Issues

support
1

I have two issues when attempting to display bootstrap cards.
My website is here: https://andymcdgeo.github.io/

1 - I can’t seem to make the cards the same height. I have tried using h-100 in the card div, but I cannot seem to get it to work.

Here is the code snippet for the blog post cards:

  <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>

2 - Secondly, I am trying to make the images fill the card box and look good. I think I have messed up the css somewhere, but I can see where.

Any help or advice would be appreciated. Thanks

2

I know that others have replied to a CSP issue you opened recently but this forum is not meant to provide support for general web development like CSS and JS issues etc.

Please have a look at the Requesting Help guidelines and the Help Keep This Forum Practical topic.

For CSS questions search other channels like StackOverflow, CSS-Tricks, W3Schools etc.

OR

Ask the author of the theme you’re using.

3

Section “card groups” and “images” are quite clear.

1 Like
4

This topic was automatically closed after 18 hours. New replies are no longer allowed.