Bootstrap 4 latest blog columns
by Grobbert
HTML
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<div class="card-columns">
<div class="card">
<img alt="Card image cap" class="card-img-top img-fluid" src="https://www.fillmurray.com/420/200">
<div class="p-3 card-block">
<h4 class="card-title">Boating is the new canoeing</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top img-fluid" src="https://www.fillmurray.com/414/200">
<div class="p-3 card-block">
<h4 class="card-title">This almost brought the Internet to its knees</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top img-fluid" src="https://www.fillmurray.com/412/200">
<div class="p-3 card-block">
<h4 class="card-title">Try not to gasp when you find out who painted this.</h4>
<span class="badge badge-success">Health</span>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top img-fluid" src="https://www.fillmurray.com/411/200">
<div class="p-3 card-block">
<h4 class="card-title">Lower back pain...CSS
body {
margin: 20px;
}