Submitted almost 3 years ago

Responsive card summary using css flexbox, grid, and html

BGzero3•60

@BGzero3

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

How could this be done with bootstrap?

Community feedback

Byron•2,290

@byronbyronPosted almost 3 years ago

The easiest and quickest way would be to add the bootstrap CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

to inside the <head> tags and use the .card, .card-img-top and .card-body classes along with other utility classes like .text-center. https://getbootstrap.com/docs/5.1/components/card/

e.g.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body text-center">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

BGzero3•60

@BGzero3Posted almost 3 years ago

@byronbyron Thank you for the feedback.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord