Bootstrap UI Card Example

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">
      <h5 class="card-title">Title</h5>
      <p class="card-text">This is the card description</p>
    </div>
    <div class="card-footer d-flex justify-content-end">
      <a href="#" class="btn btn-primary">Acción</a>
    </div>
  </div>
</body>

CSS

body {
  min-height: 100vh;
}
.card {
  min-height: 250px;
}