<div class="card-group"> <div class="card"> <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </p> <p class="card-text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> <div class="card"> <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> <div class="card"> <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. </p> <p class="card-text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter