Bootstrap cards aligned vertically

Question

I want to align a few bootstrap cards vertically. I need this to be responsive. I was trying to set the width of a parent div smaller, but that didn't do the trick for me. What I have:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="news newspage">
  <h4 class="heading">Nieuws</h4>

  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Foo Bar</h4>
      <div class="card-subtitle">
        <span class="eventdate">
            <i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
        </span>
      </div>
      <div class="card-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <a href="#" class="card-link"> > Lees het hele bericht</a>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Foo Bar</h4>
      <div class="card-subtitle">
        <span class="eventdate">
            <i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
        </span>
      </div>
      <div class="card-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <a href="#" class="card-link"> > Lees het hele bericht</a>
    </div>
  </div>



</div>

All help is appreciated!

Answer 1

You could use display:grid; to achieve that. At the moment I specified it to have two columns (two cards side-by-side) but you can add and remove the 1frs of grid-template-columns to change the amount of columns.

You could also apply the CSS to .news but you'd have to move the <h4>-heading out of it.

#news-grid {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="news newspage">
  <h4 class="heading">Nieuws</h4>

  <div id="news-grid">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Foo Bar</h4>
        <div class="card-subtitle">
          <p class="eventdate">
            <i class="fa fa-calendar-alt">Geplaatst op d MMMM yyyy</i>
          </p>

        </div>
        <div class="card-text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
        <a href="#" class="card-link"> > Lees het hele bericht</a>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Foo Bar</h4>
        <div class="card-subtitle">
          <p class="eventdate">
            <i class="fa fa-calendar-alt">Geplaatst op d MMMM yyyy</i>
          </p>
        </div>
        <div class="card-text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
        <a href="#" class="card-link"> > Lees het hele bericht</a>
      </div>
    </div>
  </div>

</div>

Answer 2

You can put them in rows and columns and the rows will stack vertically. IF you want a specific width, you can use one of the col-* classes

<div class="news newspage">
    <h4 class="heading">Nieuws</h4>
    @foreach (var _news in Model.News)
    {
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@_news.NewsTitle</h4>
                        <div class="card-subtitle">
                            <span class="eventdate">
                                <i class="fa fa-calendar-alt"></i> Geplaatst op @_news.PostedOn.ToString("d MMMM yyyy")
                            </span>
                        </div>
                        <div class="card-text">
                            <p>
                                @_news.NewsArticle
                            </p>
                        </div>
                        <a href="#" class="card-link"> > Lees het hele bericht</a>
                    </div>
                </div>
            </div>
        </div>
    }
</div>