Bootstrap Custom Card Example 2

by Alejandro M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<body class="bg-light d-flex align-items-center justify-content-center">
  <div class="card">
    <div class="card-body d-flex flex-row">
      <img
        src="https://placehold.co/150x150/EEE/31343C"
        class="img-fluid"
        alt="Imagen de ejemplo"
        style="width: 150px; height: 150px; object-fit: cover"
      />
      <div class="ms-3">
        <h5 class="card-title">Title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="card-footer bg-white border-0 d-flex justify-content-end">
      <a href="#" class="btn btn-primary">Call to action</a>
    </div>
  </div>
</body>

CSS

body {
  min-height: 100vh;
}
.card {
  max-width: 600px;
}