Boostrap Cards

pytanie zadane 11 sierpnia w HTML i CSS przez fafikk Nowicjusz (130 p.)

Hej! Czy ktoś mógłby mi pomóc z wykorzystaniem komponentów kart do stworzenia układu, jak na załączonym obrazku? Nie zależy mi na stylizowaniu przycisków itp., potrzebuję jedynie wsparcia w zbudowaniu „siatki”, która umożliwi uzyskanie takiego efektu.

2 odpowiedzi

odpowiedź 12 sierpnia przez pablop76 VIP (123,340 p.)

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">

    <title>Bootstrap Example</title>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  </head>

  <body>

    <div class="card p-2" style="max-width: 450px;">

      <div class="row">

        <div class="col-12 col-sm-6 d-flex">

          <img src="https://i.pravatar.cc/100" class="img-thumbnail" alt="...">

          <div>

          Title

            <div>

            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>281/2000

            </div>

          </div>

        </div>

        <div class="col-12 col-sm-6">

          <span class="badge text-bg-primary">Primary</span>

          <span class="badge text-bg-secondary">Secondary</span>

        </div>

      </div>

    </div>

  </body>

</html>