<div class="container">

  <h1>Bootstrap 4 Cards Demo</h1>
  <p>You can adjust the number of columns with media-queries</p>
  <div class="card-columns">

    <div class="card">
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-topfff&text=.card-img-top" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
        <a href="#" class="btn btn-primary">.btn-primary</a>

      </div>
    </div>

    <div class="card p-3 card-outline-primary">
      <blockquote class="card-block card-blockquote">
        .card-block .card-blockquote
        <footer>
          <small class="text-muted">
          .text-muted
        </small>
        </footer>
      </blockquote>
    </div>


    <div class="card text-center">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
        <a href="#" class="btn btn-primary">.btn-primary</a>
      </div>
      <div class="card-footer text-muted">
        2 days ago
      </div>
    </div>


    <div class="card">
      <div class="card-header">
        Quote
      </div>
      <div class="card-body">
        <blockquote class="card-blockquote">
          .card-blockquote
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>


    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">.list-group-item</li>
        <li class="list-group-item">.list-group-item</li>
        <li class="list-group-item">.list-group-item</li>
      </ul>
    </div>

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <img class="card-img-bottom img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-topfff&text=.card-img-bottom" alt="Card image cap">
    </div>


    <div class="card card-inverse">
      <a href="">
        <img class="card-img img-fluid" src="https://bootstrapcreative.com/wp-bc/wp-content/uploads/2017/02/project-files-zip.jpg" alt="Card image">

        <div class="card-img-overlay">
          <h4 class="card-title">.card-title</h4>
        </div>
      </a>
    </div>

    <div class="card card-inverse" style="background-color: #333; border-color: #333;">
      <div class="card-body">
        <h3 class="card-title">.card-title</h3>
        <p class="card-text">.card-text</p>
        <a href="#" class="btn btn-primary">.btn-primary</a>
      </div>
    </div>


    <div class="card text-center bg-faded">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a class="nav-link active" href="#tab1" data-toggle="tab">.nav-link <span class="badge badge-default">1</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tab2" data-toggle="tab">.nav-link <span class="badge badge-default">2</span></a>
          </li>
        </ul>
      </div>


      <div class="card-body">

        <div class="tab-content">
          <div class="tab-pane active" id="tab1" role="tabpanel">
            <h4 class="card-title">.card-title <span class="badge badge-default">1</span></h4>
          </div>
          <div class="tab-pane" id="tab2" role="tabpanel">
            <h4 class="card-title">.card-title <span class="badge badge-default">2</span></h4>
          </div>
        </div>

      </div>
    </div>


    <div class="card card-inverse card-primary p-3 text-center">
      <blockquote class="card-blockquote">
        .card-blockquote
        <footer>
          <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>

    <div class="card text-center">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
    </div>

    <div class="card">
      <img class="card-img img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-topfff&text=.card-img" alt="Card image">
    </div>

    <div class="card p-3 text-right">
      <blockquote class="card-blockquote">
        .card-blockquote
        <footer>
          <small class="text-muted">
          .text-muted
        </small>
        </footer>
      </blockquote>
    </div>

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
    </div>
  </div>


</div>
<!-- /.card-columns -->
</div>
<!-- /.container -->
body {margin:2rem;}

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  

}

/* Medium devices (tablets, 768px and up) 
The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}



/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

@media (max-width: 950px) { 

}
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
  
  
// document ready  
});


window.onload = function() {
 // executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
  
  
// window load  
};


External CSS

  1. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/master/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/master/bootstrap-4-latest.min.js