1

I am working on a blog template with Bootstrap 4. On the "posts page", posts are displayed as a grid of cards.

I want to make these cards equal per row, for all screen widths, even while the window is resized, if possible.

Here is the code I have so far:

.posts-grid {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.posts-grid > [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}
.posts-grid .post {
  background: #fff;
  border-top: 1px solid #d5d5d5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.posts-grid .text {
  padding: 8px;
}
.posts-grid .card-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.posts-grid .read-more {
  padding: 0 8px 8px 8px;
}
.posts-grid .text-muted {
  margin-bottom: 8px;
}
.posts-grid .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.posts-grid p {
  text-align: justify;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="posts-grid">
    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

I am looking for a pure CSS solution for this issue, if possible (if not, a jQuery solution is ok too). What is my code missing?

Asons
  • 84,923
  • 12
  • 110
  • 165
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252

2 Answers2

2

This should do it:

.posts-grid .post {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.posts-grid .read-more {
    margin-top: auto;
}

Don't forget to prefix.

.posts-grid {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.posts-grid > [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}
.posts-grid .post {
  background: #fff;
  border-top: 1px solid #d5d5d5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.posts-grid .text {
  padding: 8px;
}
.posts-grid .card-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.posts-grid .read-more {
  padding: 0 8px 8px 8px;
}
.posts-grid .text-muted {
  margin-bottom: 8px;
}
.posts-grid .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.posts-grid p {
  text-align: justify;
}
    .posts-grid .post {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .posts-grid .read-more {
        margin-top: auto;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="posts-grid">
    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • I have posted the topic *[Change the fixed navbar's classes depending on the background of the page section it hovers](https://stackoverflow.com/questions/52118919/change-the-fixed-navbars-classes-depending-on-the-background-of-the-page-sectio)*. Please have a look at it. Is the question clear, or should I rewrite it? Thanks! – Razvan Zamfir Sep 02 '18 at 06:59
1

There are builtin classes for flex in Bootstrap 4. I think if you use d-flex on parent wrapper - ex .col-xs-12 .d-flex - should work.

See BOOTSTRAP DOCS for more guidance.

If you like to see an example visit Codyply

Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
bogdan petre
  • 11
  • 1