Html Question posted in
Some basic documentation can be found here.

Html – How to make just a card in a bootstrap

I try to make this

enter image description here

But i don’t know to do that

<div class="row justify-content-center">
                    <div class="col-3 me-3" style="background-color: #F1F3F8; border-radius: 10px;">

                        <div class="row">

                            <div class="col-6">
                            <img src="/src/photos/event_upcoming.svg"
                                class="img-fluid mx-auto" />
                            </div>
                            <div class="col-6">
                                <p>Срок обучения<br>6 месяцев</p>
                                </div>
                                

                        </div>

                    </div>
                </div>
Tags:

2

Answers


  1. 0

    Please find below the output, let me know if any doubts with the CSS

      .c-light {
    color: #7e8591;
  }
  .c-black {
    color: black;
  }
    <div class="row justify-content-center">
  <div
    class="col-8 me-8"
    style="background-color: #f1f3f8; border-radius: 10px"
  >
    <div class="row">
      <div class="col-4 p-4">
        <img src="https://placehold.co/150x150" class="img-fluid mx-auto" />
      </div>
      <div class="col-8 d-flex align-items-center justify-content-start">
        <p class="c-light">
          Срок обучения<br /><span class="c-black">6 месяцев</span>
        </p>
      </div>
    </div>
  </div>
</div>

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

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
  crossorigin="anonymous"
></script>
    Login or Signup to reply.
  2. 0

    You can simply achieve that like this:

    HTML:

    <div class="main-card">
  <div class="icon-holder">
    YOUR ICON
  </div>

  <div class="title-holder">
    <p>Title</p>
    <p>Sub-Title</p>
  </div>
</div>

    CSS

    .main-card {
    ** THIS WILL HAVE THE CARD DESIGN CSS ** 
    **AND**
    display: flex;
    align-items: center;
}

.title-holder {
    display: flex;
    flex-direction: column;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search