sandbox.mdwn

   1 <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
   2   <div class="card-header">Header</div>
   3   <div class="card-body">
   4     <h4 class="card-title">Primary card title</h4>
   5     <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>
   6   </div>
   7 </div>
   8 <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
   9   <div class="card-header">Header</div>
  10   <div class="card-body">
  11     <h4 class="card-title">Secondary card title</h4>
  12     <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>
  13   </div>
  14 </div>
  15 <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
  16   <div class="card-header">Header</div>
  17   <div class="card-body">
  18     <h4 class="card-title">Success card title</h4>
  19     <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>
  20   </div>
  21 </div>
  22 <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
  23   <div class="card-header">Header</div>
  24   <div class="card-body">
  25     <h4 class="card-title">Danger card title</h4>
  26     <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>
  27   </div>
  28 </div>
  29 <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
  30   <div class="card-header">Header</div>
  31   <div class="card-body">
  32     <h4 class="card-title">Warning card title</h4>
  33     <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>
  34   </div>
  35 </div>
  36 <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
  37   <div class="card-header">Header</div>
  38   <div class="card-body">
  39     <h4 class="card-title">Info card title</h4>
  40     <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>
  41   </div>
  42 </div>
  43 <div class="card bg-light mb-3" style="max-width: 20rem;">
  44   <div class="card-header">Header</div>
  45   <div class="card-body">
  46     <h4 class="card-title">Light card title</h4>
  47     <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>
  48   </div>
  49 </div>
  50 <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
  51   <div class="card-header">Header</div>
  52   <div class="card-body">
  53     <h4 class="card-title">Dark card title</h4>
  54     <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>
  55   </div>
  56 </div>