<div class="card-group mb-8">​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">This is a wider card with supporting text below as a natural lead-in toadditional content. Thiscontentis a little bit longer.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/plant.jpeg" alt="plant"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/coffee-cookies.jpeg" alt="Coffee"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">This is a wider card with supporting text below as a natural lead-in toadditional content. Thiscardhas even longer content than the first to show that equal height action.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​</div>
<div class="card-deck mb-8">​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/asphalt-balancing.jpeg" alt="Balancing"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">This is a wider card with supporting text below as a natural lead-in toadditional content. Thiscontentis a little bit longer.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/sunset.jpeg" alt="sunset"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/person-walking.jpeg" alt="Person"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">This is a wider card with supporting text below as a natural lead-in toadditional content. Thiscardhas even longer content than the first to show that equal height action.</p><!-- /card text-->​<!-- Card Text--><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p><!-- /card text-->​</div><!-- /card body -->​</div><!-- /card -->​</div>
<div class="card-columns">​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/painted-hand.jpeg" alt="Hand"><!-- /card image -->​<!-- Card Body --><div class="card-body"><h2 class="card-title">Card title that wraps to a new line</h2><p class="card-text">This is a longer card with supporting text below as anatural lead-in toadditionalcontent. This content is a little bit longer.</p></div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Blockquote --><blockquote class="blockquote mb-0 card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erata ante.</p><footer class="blockquote-footer"><small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small></footer></blockquote><!-- /blockquote -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/bottle.jpeg" alt="Bottle"><!-- /card image -->​<div class="card-body"><h2 class="card-title">Card title</h2><p class="card-text">This card has supporting text below as a natural lead-in toadditionalcontent.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><!-- /card -->​<!-- Card --><div class="card bg-primary text-center">​<!-- Card Body --><blockquote class="blockquote mb-0 text-white card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuereerat.</p><footer class="blockquote-footer text-white"><small>Someone famous in <cite title="Source Title">Source Title</cite></small></footer></blockquote><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card text-center">​<!-- Card Body --><div class="card-body"><h2 class="card-title">Card title</h2><p class="card-text">This card has supporting text below as a natural lead-in toadditionalcontent.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Image --><img class="card-img" src="assets/images/card/doughnut.jpeg" alt="Doughnut"><!-- /card image -->​</div><!-- /card -->​<!-- Card --><div class="card text-right">​<!-- Card Body --><blockquote class="blockquote mb-0 card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erata ante.</p><footer class="blockquote-footer"><small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small></footer></blockquote><!-- /card body -->​</div><!-- /card -->​<!-- Card --><div class="card">​<!-- Card Body --><div class="card-body"><h2 class="card-title">Card title</h2><p class="card-text">This is a wider card with supporting text below as anatural lead-in toadditionalcontent. This card has even longer content than the first to show that equalheight action.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div><!-- /card body -->​</div><!-- /card -->​</div>